封装使用axios进行接口请求

一、安装axios

1. npm install axios
2. 在main.js引入

import axios from "axios"
Vue.use(axios) // vue3使用createApp(App).config.globalProperties.$axios = axios

二、创建request.js封装axios

1. 引入

import axios from 'axios'
import { Toast } from 'vant' // toust是vant组件中轻提示，可根据项目更改

2. 设置环境切换axios baseUrl

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://开发环境接口地址'
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = 'http://测试环境接口地址'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://生产环境接口地址'
}

3. 设置请求超时时间

axios.defaults.timeout = 10000; // 10s

4. 设置请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

5. 请求拦截（判断已经登录才请求）

axios.interceptors.request.use( 
  config => {
    // 每次发送请求之前判断是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    const token = '获取token' // 存在vuex，本地或者cookie
    if (token) {
      config.headers.Authorization = token // Authorization是后台接收的参数名
      // 或者
      // config.headers['Authorization'] = token // Authorization是后台接收的参数名
    }
    return config;
  },
  error => {        
   return Promise.error(error);    
  }
)

6. 响应拦截

axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。                
        case 401:
          router.replace({
            path: '/login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面                
        case 403:
          Toast('登录过期，请重新登录');
          // 清除token
          localStorage.removeItem('token'); // 这里是本地存储的清除，需根据实际情况清除
          store.commit('loginSuccess', null); // 这里是vuex状态的清除，需根据实际情况清除
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
          setTimeout(() => {
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
          break;

        // 404请求不存在
        case 404:
          Toast( '网络请求不存在');
          break;
        // 其他错误，直接抛出错误提示
        default:
          Toast( error.response.data.message);
      }
      return Promise.reject(error.response);
    }
  }
)

7. 导出axios

export default axios;

三、创建需要的api.js

1. 引入request.js

import request from '@/utils/request'; // 路径根据实践情况
import qs from 'qs'; // 安装引入qs用于序列化参数（axios post方法需要传递序列化的参数）

2. 导出请求的函数

export function login(data) {
  return request({
    url: '/api/user/login/',
    method: 'post',
    data: qs.stringify(data)
    })
}

export function getInfo(data) {
  return request({
    url: '/api-token-auth',
    method: 'get',
    params: data
  })
}

注意：

axios的post和get方法传参略有不同：

1. post请求参数必须序列化，可以使用qs模块
2. post请求发送参数使用data: {}，data 是作为请求主体被发送的数据
3. get请求发送参数使用params: {}，params 是即将与请求一起发送的 URL 参数

四、在页面中调用

1. 引入

import * as 名称 from '路径': // 例：import * as Http from "@/api/login";

2. 使用

Http.login(this.loginForm)
  .then(res => {
   // 请求成功操作
  })
  .catch(err => {
    // 请求失败操作
  });