37.axios

之前将vue的时候漏掉的.补发一下

axios是什么

使用vue的小伙伴对于axios应该都不会陌生,从vue2.0开始 尤大大就开始推荐开端开发中使用axios来管理,发送请求.axios就成为了vue全家桶中重要的一部分. axios是基于promise的网络请求库,在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

安装和使用

安装

yarn add axios
npm install axios

直接使用

import axios from "axios";
axios.get("192.168.0.1").then((res) => {
  console.log(res);
});
axios
  .get({
    url: "192.168.0.1",
    method: "put",
  })
  .then((res) => {
    console.log(res);
  });

post同理

{
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    firstName: 'Fred'
  },
  
  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',


	//响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },

封装axios

基本配置

可以配置超时时间(TimeOut),基础地址(baseURL),编码规则(responseEncoding)等等

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 配置开发环境的baseApi
  timeout: 5000 // 超时时间
})

请求拦截器

在请求拦截器service.interceptors.request.use()中,我们可以统一添加token,刷新token,统一请求头添加,编码协议等等

service.interceptors.request.use(config => {
  // 注入token 判断token在不在
  if (store.getters.token) {
    // 判断是否超时
    if (checkTimeOut()) {
      // 超时了 删除token 跳到登录页
      refreshToken()
    }
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config // config必须返回
}, error => {
  return Promise.reject(error)
})

响应拦截器

在响应拦截器中我们可以统一的处理请求错误,

request.instance.interceptors.response.use(
  function (response) {
    if (response.status !== 200) {
      console.error("网络错误....");
      toast.error(response.data?.message ?? response.data.toString());
    } else {
      // 下载文件用
      if (
        (response.request && response.request.responseType === "blob") ||
        response.data.code === undefined
      ) {
        return response;
      }
      return response.data;
    }
  },
      if (response.code === "9003004") {
      await actions.refreshToken();
      return await Request(api, url, params, options);
    }
    if (response.code == 50010 || response.code == "9003008") {
      actions.loginOut();
    }
    if (response.code !== "00000" && api.topTips) {
      // 需要顶部错误提示时执行
      toast.error(response.message);
    }
  function (error) {
    toast.error(error.toString() ?? "未知异常，请联系管理员");
    return Promise.reject(error);
  }
);

封装请求

统一请求的的地址,参数.类型管理

import request from '@/utils/request'
export function login(data) {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}

使用请求

在组件的引入放方法,配合async,await和解构赋值使用

import { getUserDetailById } from "@/api/user";
    async getJobDetail() {
      const userInfo = await getUserDetailById(this.userId);
    },