axios库的使用

安装axios

在文件根目录下,npm install axios

封装axios拦截器

在文件根目录下 创建一个 utils文件夹,然后创建一个request文件;
参考文章@小只昵称被占用了

./request  文件下
import axios from "axios";

const request = axios.create({
	baseURL:"http://localhost:8080/",
	timeout:5000,
})
//封装一个请求拦截器
request.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
//封装一个相应拦截器
request.interceptors.response.use(
  (response) => {
    return response;
  },
  (err) => {
    // console.log("error", err);
    const {
      response: { status },
    } = err;
    if (status === 401) {
      router.push("/");
    }
    return Promise.reject(err);
  }
);
export default request;

axios 传递参数的方式

参考文章@twinkle||cll

1. get 请求：params 传参，会默认把要传的参数添加到 url 后面
2. post 请求：data 传参，会将参数放在 body 请求体中 (传给后端的是一个对象)
   params 传参 会将参数拼接到 url 后面。

总结: 其实前端和后端 对接参数过程，对于 post 请求，data 不行，那就使用 params 来 进行 传递，如果都不行，那就可能后端有问题了。

封装接口

我们可以在request 同级目录下,封装一个https.js文件

./https   文件下
import request from "./request"
//post请求
export const getPersonInfo = data => {
    return request ({
        url: '/person_pay/getpersoninfo',
        method: 'post',
        data:data
    })
};
//get请求
export function fetchPv(pv) {
  return request({
    url: '/vue-element-admin/article/pv',
    method: 'get',
    params: { pv }
  })
}
//传递params 参数等同于在url 后面拼接
url:'/vue-element-admin/article/pv?id=${pv}'

调用接口

import {getPersonInfo} from '../utils/api.js'
export default {
    created: async function () {
        let res = await getPersonInfo(params);
        console.log(res);
    }

axios 使用get 方法给后端传一个数组

问题描述:

• 后端需要我 使用get方法 将一个数组作为参数传递给后端.
• 使用params 传递数组时会出现乱码.

解决办法:

• 使用qs 进行序列化解码.

参考文章@一个鸡蛋壳儿

//qs 相关配置
1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'

//axios js文件中具体配置
axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
   config.paramsSerializer = function(params) {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   }
 }
}