Vue 网络请求模块封装 (axios)

• 1. vue 中如何发送网络请求 ？
• 2. 在 vue 脚手架中使用 axios
• 3. 请求配置
• 4. 配置默认值
• 5. 网络请求模块封装

1. vue 中如何发送网络请求 ？

---

选择一: XMLHttpRequest (XHR)

这种方式配置和调用方式都非常混乱，编码也很复杂，所以真实开发中都不会使用 XHR 这种方式

选择二: jQuery-Ajax

如果项目中使用了的 jquery，那么我们一般都会使用 jquery 自带的 ajax 封装，也就是 $.ajax({})

但是，要明确一点，在 vue 整个开发中都是不需要使用 jQuery 了，如果在 vue 中还要使用 $.ajax 则使用引入 jquery。jquery 的代码达到 1w+ 行，vue 代码才 1w+ 行，完全没有必要为了网络请求引用这个重量级框架

选择三: axios

在 Vue1.x 的时候，Vue 官方推出了 vue-resource，它的体积相对于 jquery 小了很多，在 Vue2.x 推出后，去掉了 vue-resource，并且 vue 作者尤雨溪推荐使用 axios

2. 在 vue 脚手架中使用 axios

---

axios 中文文档: http://www.axios-js.com

安装 axios 包

npm install axios

在 main.js 中导入 axios

import axios from 'axios';

3. 请求配置

---

当 url 不是一个绝对 URL 时，baseURL 才会自动加在 url 前面

常用请求配置参数

axios({
url: "/goods/getLists",
method: "post",
baseURL: "http://shop.cy",
params: {
id: 10
},
data: {
name: 'liang'
},
headers: {
token: "abcdef"
},
timeout: 5000
})

4. 配置默认值

---

全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;

自定义实例默认值

当前接口地址是多个域名时，定义全局配置默认值显然是不合适的，因为接口前缀不同，此时可以定义多个 axios 实例

// 创建 axios 实例
const instance = axios.create({
baseURL: "http://shop.cy",
timeout: 500
})
// 发送网络请求
instance(config).then(res => {
console.log('res', res)
})

5. 网络请求模块封装

---

创建文件: src/network/request.js

import axios from 'axios';
export default (config) => {
// 创建 axios 实例
const instance = axios.create({
baseURL: "http://shop.cy",
timeout: 1
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 响应成功
return response.data; // 返回接口数据
}, error => {
// 响应错误
return Promise.reject(error);
});
return instance(config)
};

使用示例

request({
url: '/test/req',
params: {
id: 200
}
}).then(res => {
console.log('res', res)
}).catch(err => {
console.log('err', err)
})