axios的二次封装,post请求发送x-www-form-urlencode样式

2,038 阅读2分钟

1 安装axios,下面介绍为什么安装qs依赖

npm i axios qs

qs.parse()将URL解析成对象的形式

const qs = require('qs');
let url = '地址';
qs.parse(url);
console.log(qs.parse(url));

qs.stringify()将对象 序列化成URL的形式,以&进行拼接

const qs = require('qs');
let obj= {
     method: "query_sql_dataset_data",
     token: "b-a6006ad3dba0",
     id: " 12"
   };
qs.stringify(obj);
console.log(qs.stringify(obj));

2 在src文件夹下面新建一个api文件夹,新建一个http.js文件。

// 将axios进行二次封装
// 将axios进行二次封装
import axios from 'axios'
// 将对象进行转换
import qs from 'qs'

// 配置不同的环境进行区分不同的接口地址
// 生产环境
if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseUrl = 'http://192.168.1.90:8081'
    break
}
// 测试环境
else if (process.env.NODE_ENV == 'test') {
    axios.defaults.baseUrl = 'http://192.168.1.90:8081'
    break
}
// 开发环境
else {
    axios.defaults.baseUrl = 'http://192.168.1.90:8081'
    break
}


// 设置超时时间和跨域是否允许跨域携带凭证
axios.defaults.timeout = 100000
// 设置Cros跨域可以携带cookie。不然在跨域的情况下无法携带cookie
axios.defaults.withCredentials = true


// 发送请求:X-www-form-urlencode
// 当发送post请求的时候,后台要的是这种格式的数据,前端将对象转换为这个格式
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencode'
// qs就是将某个对象变成
axios.defaults.transformRequest = data => qs.stringify(data)


// 设置拦截器
// 添加请求拦截器
// 设置token值
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 携带token 
    let token = window.localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器,服务器返回信息
// 设置自定义状态码。很多公司都是不配置的,因为很多后台不返回3xx状态码
// axios.defaults.validateStatus = status =>{
//     // 自定义响应HTTP状态码,大于200小于300的状态码
//     return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // 这个就是服务器只有响应的主体部分
    return response.data;
}, function (error) {

    // 对响应错误做点什么
    if(error.response){
        // 服务器至少返回了结果,看状态码
    }else{
        // 服务器没有响应。1 服务器崩了。2 客户端断网了
        if(!window.navigator.onLine){
            // 客户端断网了,可以跳转到一个断网页面

        }
    }
    return Promise.reject(error);
});

export default axios;

3 在package.json文件夹里面如何设置各种环境

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:test":"set NODE_ENV=test&&vue-cli-service serve",
    "serve:production":"set NODE_ENV=production&&vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },