vue项目async/await封装axios请求

安装axios

npm install axios --save

创建http.js文件

import axios from "axios"
/* 请求拦截器 */
axios.interceptors.request.use(
    config => {
        /* 添加token */
        let token = localstorage.getItem("token") || "";
        if(token){
            config.headers["token"] = token
        }
        return config;
    },
    error => {
        return Promise.reject(error)
    }
)

export const http = (url,params,method='GET',type='json') =>{
    /* 设置时间随机数,解决请求缓存问题 */
    let _t = new Date().getTime();
    if(method == 'GET' || method == 'get'){
        if(params){
            params._t = _t
        }else{
            params={ _t }
        }
    }
    /* 设置请求头 */
    if (method === "POST") {
        if (type == "json") {
          //参数是json类型
         axios.defaults.headers.post["Content-Type"] =
         "application/json;charset=UTF-8";
      } else {
        //参数是字符串类型
        axios.defaults.headers.post["Content-Type"] =
          "application/x-www-form-urlencoded";
        // params = Qs.stringify(params);
      }
    }
    
    /* 发送请求 */
    return new Promise((resolve,reject) => {
        axios({
            url,
            method,
            type,
            data:method != "GET" ? params : null,
            params:method == "GET" ? params : null
        })
            .then(result => {
                /* 此处可以全局处理接口特殊状态码,比如token失效等 */
                resolve(result.data)
            })
            .catch(error => {
                reject(error)
            })
    })
}

/* await to js */
export const to = promise => {
    return promise.then(res => [null,res]).catch(error => [error])
}

创建api.js文件,设置接口请求处理

import { http, to } from "./http";

//  ---- 全局接口 -----
export const ceshiList = params => {
  return to(http("json/ceshi.json", params, "GET"));
};

api使用

import { ceshiList } from "@/http/api.js";
methods:{
    async getList(){
        let [err, res] = await ceshiList();
        if (!err) {
          if (res.result.code == 200) {
            /* 接口请求正确处理 */
            console.log(res);
          }
        }
    }
}

转化blob返回的数据

const render = new FileReader();
render.onload = function(){
    let jsonData = JSON.parse(render.result)
}
render.readAsText(data)

你可能感兴趣的:(vue项目async/await封装axios请求)