1. Axios
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
安装
使用 npm:
$ npm install axios
使用 yarn:
$ yarn add axios
2. 封装axios
// utils.request.js
// 引入axios
import axios from 'axios';
const baseURL = '/';
const token = '';
// 创建实例
const instance = axios.create({
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL,
// `timeout` 指定请求超时的毫秒数。
// 如果请求时间超过 `timeout` 的值,则请求会被中断
timeout: 1000 * 10, // 默认值是 `0` (永不超时)
// 自定义请求头
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: true,
})
// 添加请求拦截器
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
// 自己的config 处理
// 设置token
if (token) config.headers["Authorization"] = "Bearer " + token;
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(response => {
// 2xx 范围内的状态码都会触发该函数。
const code = response.data.code;
// 对接口返回的内部code值判断操作
if (code === 401) {
Message.error('没有权限');
} else if (code === 500) {
Message.error('系统错误');
}
// 对响应数据做点什么
return response.data;
}, error => {
// 超出 2xx 范围的状态码都会触发该函数。
// Message.error(error.message); // 统一报错提示
// 对响应错误做点什么
return Promise.reject(error);
});
// 导出request
export default function request({
method = "get", // 请求方式 默认get
url = '', // 地址
data = {}, // post参数
params = {}, // get参数
controller // 取消请求传入 new AbortController()
}) {
const signal = controller ? controller.signal : undefined;
return instance({
method,
url,
data,
params,
signal,
})
}
3. api统一管理
// api.js
import request from '../utils/utils.request'
// 获取商品列表
export const goodsListApi = (params, controller) => {
return request({
url: '/goodsList',
method: 'get',
params,
controller
})
}
4. 引入api
// main.js
import Vue from 'vue'
import App from './App.vue'
import * as api from './api/index' // 引入 api.js
Vue.config.productionTip = false;
Vue.prototype.$api = api; // 将api挂在到Vue上
new Vue({
render: h => h(App)
}).$mount('#app')
5. 组件中使用
export default {
data() {
return {
controller: new AbortController(),
}
},
created() {
setTimeout(() => {
// 取消请求
this.controller.abort();
}, 50);
this.getGoodList()
},
methods: {
async getGoodList() {
await this.$api.goodsListApi({}, this.controller).then(res => {
const { code, msg, data } = res;
if( +code !== 200 ) throw new Error(msg);
console.log(data);
}).catch(err => {
console.log('err:', err.message);
})
},
}
}