Vue使用axios发送请求并实现简单封装的示例详解

一、安装axios

npm install axios --save

二、简单使用

1.配置

main.js中加入如下内容

// 引入axios ---------------------------------------------------
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.prototype.$axios.defaults.baseURL = 'http://127.0.0.1:8000/' // 请求根路径
// -------------------------------------------------------------

2.发送请求

<1>get

this.$axios.get('index').then(res => {
  // 返回数据在 res.data 中
})

<2>post

this.$axios.post('login', {user:"admin", pwd:"123"}).then(res => {
   // 返回数据在 res.data 中
})

<3>并发

var res1 = this.$axios.get('index')
var res2 = this.$axios.post('login', {user:"admin", pwd:"123"})
this.$axios.all([res1, res2]).then(this.$axios.spread(res1, res2) => {
  // 两个请求的返回结果在 res1 和 res2 中
})

三、封装使用

1.创建js封装类

src/request/index.js

// 引入
import Axios from 'axios'
import { Message } from 'element-ui'   	// 需要装个 element-ui,错误提示界面友好一些

// 前端存在 localStorage 中的 token
const token = localStorage.getItem('token')

// 实例化
const request = Axios.create({
  baseURL: "http://127.0.0.1:8000/",  	// 服务根路径
  timeout: 200000,						// 请求过期时间
  headers: {
    Authorization: token    			// token 插入请求头给后端校验
  }
})

// 拦截后端返回的请求
request.interceptors.response.use(res => {
  if (res.status !== 200) {
    Message.error("something err...") 	// 返回错误的提示信息
  }
  return res.data     					// 只取 res 中的 data,后续取值不需要再写一层 data 了  
})

// 导出
export default request

2.配置

main.js中改成如下内容

// 引入axios ---------------------------------------------------
import request from './request'
Vue.prototype.$http = request
// -------------------------------------------------------------

3.发送请求

<1>get

this.$http.get('index').then(res => {
  // 返回数据在 res.data 中
})

<2>post

this.$http.post('login', {user:"admin", pwd:"123"}).then(res => {
   // 返回数据在 res.data 中
})

<3>并发

var res1 = this.$http.get('index')
var res2 = this.$http.post('login', {user:"admin", pwd:"123"})
this.$http.all([res1, res2]).then(this.$http.spread(res1, res2) => {
  // 两个请求的返回结果在 res1 和 res2 中
})

到此这篇关于Vue使用axios发送请求并实现简单封装的文章就介绍到这了,更多相关Vue axios发送请求封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • vue cli3 项目中如何使用axios发送post请求
  • vue axios post发送复杂对象问题
  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法
  • vue中axios处理http发送请求的示例(Post和get)
  • VUE axios发送跨域请求需要注意的问题
  • 详解Vue用axios发送post请求自动set cookie
  • Vue.js实战之使用Vuex + axios发送请求详解
  • VUE零基础入门axios的使用
张贴在2