axios的封装

• 在项目中发送请求都使用axios，所以首先应该安装：

npm i axios

• 在src下新建request文件夹，在其中新建request.ts文件，对axios进行封装：

• 配置拦截器：

import axios from "axios";

// 创建实例
const instance = axios.create({
  baseURL: 'http://localhost:3002',
  timeout: 5000,
//   headers: {'X-Custom-Header': 'foobar'}
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 设置请求头
    let token = localStorage.getItem('token');
    if(token) {
        config.headers.Authorization = 'Bearer ' + token;
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    // 错误拦截
    let code = error.response.status;
    switch (code) {
        case 400:
            console.log('错误请求');
        break;
        case 401:
            console.log('未授权');
        break;
        case 403:
            console.log('拒绝访问');
        break;
        case 404:
            console.log('资源未找到');
        break;
        case 500:
            console.log('服务器内部错误');
        break;
        case 502:
            console.log('网关错误');
        break;
    }
    return Promise.reject(error);
  });

  export default instance;

这个文件中，一般会配置token携带、响应成功会存储token、4开头的错误处理、5开头的错误码处理。

• 为了让整个项目的所有请求都封装在一起，实现业务的解耦，我们还封装一个用axios发请求的函数，在request下新建了methods.ts：

import axios from './axios'
// 定义接口
interface typeObj {
    [key:string]:string|number
}
interface typeParams {
    url: string
    method?: string
    headers?: typeObj
    data?: typeObj
    params?: typeObj
}
// 给axios封装get方法和post方法
// 发送get请求
export const get = (params: typeParams) => {
    params.method = 'get'
    return axios(params)
}

// 发送post请求
export const post = (params: typeParams) => {
    params.method = 'post'
    return axios(params)
}

• 项目中用到的所有请求，我们都放在request文件夹下，再新建了index.ts,统一进行管理：

import {get, post} from './methods'
// 封装具体的请求方法
// 请求天气
export const getWeather = () => {
    return get({
        url: 'http://v1.yiketianqi.com/api',
        params: {
            unescape: 1,
            version: 'v61',
            // appid: '177***33',
            // appsecret: '1fv***G9'
        }
    })
}

在组件中，发送请求，只需要导入index.ts中导出的函数即可。