axios的使用

前言

前后端分离的今天。已经被封装好的ajax的请求方式axios要如何使用呢？让我们尝试一下。

使用初体验

通过npm安装axios。在mian文件中引用通过引用依赖axios全局使用。

axios 改写为 Vue 的原型属性

import axios from 'axios'
Vue.prototype.$axios = axios

在组件中通过this.$axios.get()进行请求,因为我习惯在created里面请求就写在里面了。在created和mounted都可以进行请求的。

created(){
    this.$axios.get('/mock/news').then(res=>{
      console.log(res)
    })
  },

当然还可以封装一下axios来进行使用。

通过创建文件夹axios在里面创建一个index.js来写相关配置，方便在全局进行使用。

axios通常有几个参数

 baseURL: "http://locathost:8080", //请求端口域名
      timeout: 5000, // 超时时间
      url: "",  // 请求路径
      method: "get", //请求方法 还有post put detele patch
      headers:{ // 请求头在请求的时候通常需要带上请求头
        token:''
      },
      params:{}, //请求带上的参数
      data:{}

使用拦截器

// config是请求前的回调函数
// err 是请求后处理的回调
axios.interceptors.request.use(config => {
    // 一般在请求的时候会添加token请求头
    config.headers.token = ''
    return config
}, err => {
    // 这里可以用作提示
    // 常见的错误http状态码 4XX 
    this.$message.err(err)
    return Promise.reject(err)
})

//响应拦截器
// res请求成功对响应数据作处理
// err 响应错误的回调
axios.interceptors.response.use(res => {
    return res
}, err => {
    // 这里可以用作提示
    // 常用的响应错误http状态码 5XX
    this.$message.err(err)
    return Promise.reject(err)
})

根据业务配置axios

import axios from 'axios'
import Vue from 'vue';
import url from './url.js'

const instance = axios.create({
    baseURL: 'http://localhost:9000/api',
    timeout: 3000,
    // withCredentials: true, // 是否需要携带凭证
})

// 创建个人博客的网址 登录页面请求不需要token
// 其他的需要header请求头
instance.interceptors.request.use(async (config) => {
        if (config.url === "/login") {
            delete config.headers["accessToken"];
        } else {
            let loginToken = localStorage.getItem("login_token");
            if (loginToken) {
                // 如果有token则可以加入请求头
                config.headers.accessToken = loginToken;
            } else {
                // 没有token将跳回login页面
                window.location.href = "/login";
                this.$message.error("请登陆");
            }
            return config;
        }
    }),
    (err) => {
        return Promise.reject(err);
    };

instance.get("/app.json").then((res) => {
    // console.log(res);
    return res.data;
}), (err) => {
    if (err.msg) {
        this.$message.error(err.respones.msg);
    }
    return Promise.reject(err)
};

// 遍历所有的url请求
// url:{
//     getList:{
//         method:'get',
//         params
//     }
// }
let http = {}
for (let i in url) {
    let api = url[i]
    // 避免进入回调地狱
    http[i] = async function (params, isFormData, config = {}) { //params：method、url等 config：参数
        let newParams = {}
        // 如果是formdata需要转化
        if (params && isFormData) {
            for (let item in params) {
                newParams.append(item, params[item])
            }
        } else {
            newParams = params
        }
        let res = {}
        if (api.method === 'post') {
            try {
                res = await instance[api.method](api.url, newParams, config)
            } catch (err) {
                res = err
            }
        } else if (api.method === 'delete' || api.method === 'get') {
            config.params = newParams
            try {
                res = await instance[api.method](api.url, config)
            } catch (err) {
                res = err
            }
        }
        return res
    }
}

Vue.prototype.$http = http