axios二次封装

axios二次封装

一、axios

官网

1. 下载 引入
2. 使用,如下

axios.get('url?参数1=值&参数2=值');

axios.post('url',{
	参数:值,
	参数2:值});

axios{{
  url: '请求的路经',// `url` 是用于请求的服务器 URL
  method: '请求方法', // 默认值get  // `method` 是创建请求时使用的方法
  params: {} //get请求方法：前端给后端传递的数据
  data：{} //post请求方法：前端给后端传递的数据
  headers: {}, // 自定义请求头
  timeout: 1000, // 默认值是 `0` (永不超时) // 如果请求时间超过  `timeout` 的值，则请求会被中断
  //表示浏览器将要响应的数据类型
  responseType: 'json', // 默认值
});

二、axios的二次封装

util->request.js

// 1.
import axios from "axios";
/* 2 
  * 第1种根据环境变量区分接口的默认地址
*/ 
const instance = axios.create({
    // baseURL: 'http://testapi.xuexiluxian.cn',
    baseURL: process.env.VUE_APP_TITLE == "生产环境" ? process.env.VUE_APP_BASE_API:'',
    // 设置超时时间
    timeout: 10000,
    // 设置跨域是否允许携带凭证
    withCredentials:true,
    
  });
  
  /* 
  * 第二种根据环境变量区分接口的默认地址
  *这种方法需要将.env.development 和 .env.production文件删除
  */ 
//  switch(process.env.NODE_ENV){
//   case "production":
//     axios.defaults.baseURL = "http://api.production.cn";
//     break;
//   case "test":
//     axios.defaults.baseURL = "http://api.test.cn";
//     break;
//   default:
//     axios.defaults.baseURL = "http://testapi.xuexiluxian.cn"
//  }

/*
*设置请求传递数据的格式
*post方法传递的数据是json格式，如果后端需要接收x-www-form-urlencoded格式 则需转换
*/
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data);

  // 3.添加请求拦截器 前端给后端的东西
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么  ==> 判断用户是否登录状态
    // 携带上token
    let token = localStorage.getItem('token');
    token && (config.headers.Authorization = token);
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 4.添加响应拦截器 后端给前端的东西
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么 response的判断
    return response;
  }, function (error) {
    if(error.response){
      //请求已发送 返回错误状态码，设置不同状态码的不同处理
      switch(error.response.status){
        case 401: //当前请求需要用户验证，一般是未登录
         break;
        case 403: //服务器已经请求，但是拒绝执行它，一般是token过期
          break;
        case 404: //请求失败 请求所希望得到的资源未在服务器上发现
          break;
      }
      return Promise.reject(error.response);
    }else{
      // 有可能是断网 或 服务器崩了
      if(!window.navigator.onLine){
        // 断开网络了 可以调到其他页面
        return;
      }
      return Promise.reject(error);
    }
   
  });
  export default instance;

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave: false,
  // 开启代理服务器，注意：这里的端口号写后端的端口号（方式一）
  devServer: {
    proxy: 'https://fawn.xuexiluxian.cn/api'
  },
})

三、api解耦

api->course.js

import request from '../utils/request'

// 查询课程
export function searchCourse(data){
    return request({
        url: 'api/course/search',
        method: 'post',
        data
    })
}

代码地址