vue2+axios 封装, 统一管理api， 取消请求

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);
      })
    },
  }
}