axios的简易封装

1.axios的简易封装

安装： npm install axios
引入：import axios from ‘axios’

// 简易封装axios

// 引入axios
import axios from 'axios'
import { Toast } from 'vant';

// 使用axios.create()实现封装
// axios.defaults axios.create({
//   baseURL:'http://157.122.54.189:9083'
// })

// 使用defaults配置实现封装
// 配置基准路径
axios.defaults.baseURL = 'http://157.122.54.189:9083'

// 这里还有其它代码  导航守卫拦截器等

// 拦截器 给所有要请求验证需要传递token的给Authoriaztion
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  console.log('经过了拦截器');
  // console.log(config);
  // 在发送请求之前做些什么 判断是否有token，如果有进行请求头添加token的设置
  let token = localStorage.getItem('heimatoutiao_token_60')
  if (token) {
    config.headers.Authorization = token
  }

  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器 这个是已经请求成功的了
axios.interceptors.response.use(function (response) {
  if (response.data.message == "用户信息验证失败" || response.data.message == "用户信息验证失败!") {
    // console.log(response);
    // console.log(config);
    // console.log('经过了响应拦截器')
    Toast.fail('未登录，请先登录')
    //未登录跳转到登录页面并传当前页面的路径 登录后跳转回原来的地方
    //location.href 先获取到当前地址
    // console.log(location.href);
    // 参数拼接
    window.location.href = '/login?redirectURL=' + location.href
  }
  return response;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 暴露
export default axios

2.封装请求api

// 引入刚刚简易封装的axios
import axios from '@/utils/request'
// 1.0点赞文章
export const getData = (data) => {
    return axios({
        method:get,
        url: '/article/' ,
        data
    })
}

3.使用请求api获取数据

//引入刚刚封装的api请求文件并结构出需要的api方法

import { getData } from "../api/article";
 methods: {
        async articleList(){
          let res = await getData ()
          console.log('获取到的后台数据',res)
        }
    }