基于axios封装简单的基本请求函数

基本get和post

安装axios什么的就不说了。

Content-Type: application/json：这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，无需多余的配置。

import axios from 'axios'
import { ERR_OK, BASE_URL } from "@/common/const";

axios.defaults.baseURL = BASE_URL;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/*
* params 必须是一个对象
* */
export function get(url, params) {
    // 如果不是一个对象就包一下
    if (!(typeof params == 'object')) {
        params = { params }
    }
    return axios.get(url, {
        params: params
    }).then((res) => {
        const serverData = res.data;
        if (serverData.code === ERR_OK) {
            return serverData.data
        } else {
            console.log(serverData.msg);
            return false;
        }
    }).catch((e) => {
        console.log(e)
    })
}

/*
* params 必须是一个对象
* */
export function post(url, params) {
    // 如果不是一个对象就包一下
    if (!(typeof params == 'object')) {
        params = { params }
    }
    return axios.post(url, params).then((res) => {
        const serverData = res.data;
        // console.log(serverData)
        if (serverData.code === ERR_OK) {
            return serverData.data
        } else {
            window.alert(serverData.msg)
        }
    }).catch((e) => {
        console.log(e)
    })
}

实际上是：

// GET 参数可以放到params里（推荐）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

params后面要跟一个对象。

或者使用axios中内置的qs，将对象序列化为字符串，然后拼接在url后面。

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

import qs from 'qs';

const paramsStr = qs.stringify(params);
const url = `xxx.php?${paramsStr}`

axios.get(url).then(...)

与JSON.stringify()的不同

var a = {name:'hehe',age:10};

qs.stringify(a)
// 'name=hehe&age=10'

JSON.stringify(a)
// '{"name":"hehe","age":10}'

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

let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';

qs.parse(url);

console.log(Qs.parse(url));
//  {method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0"}

qs传递数组

我们就可以通过下面方式进行处理，默认情况下，它们给出明确的索引，如下代码：

qs.stringify({ a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'

也可以进行重写这种默认方式为false

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
// 'a=b&a=c&a=d'

当然，也可以通过arrayFormat 选项进行格式化输出，如下代码所示：

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'

具体使用

get

二次封装

import { get } from "./base";

export function getmain(username) {
    return get('getmain.php', {
        username: username
    })
}

在vue文件中使用

methods: {
    
    async getMain() {
      let mss = await getmain('w')
      console.log(mss)
    }

  },

需要注意的是，使用await不能在async created（）中使用，像这样

async created(){
   let mes = await getmain();
   // 这样是不可以的，得到的mes会是一个promise对象
}

必须在methods中单独封装一下。

为基本方法添加中断请求功能

以get方法为例。我们将基本的方法改造一下

/*
* url: 请求的地址
* params： 必须是一个对象
* controller： 拦截请求的控制器
* */
export function get(url, params, controller = {}) {
    // 如果不是一个对象就包一下
    if (!(typeof params == 'object')) {
        params = { params }
    }
    return axios.get(url,
        {
            params: params,
            signal: controller.signal
        }
    ).then((res) => {
        const serverData = res.data;
        if (res.status === STATUS_OK) {
            return serverData;
        } else {
            window.alert('数据请求失败');
            console.log(res);
            return false;
        }
    }).catch((thrown) => {
        // 如果是手动取消的请求，那么什么也不做
        if (axios.isCancel(thrown)) {
            return;
        }
        window.alert('数据请求失败，请在控制台查看更多信息');
        console.log(thrown)
    })
}

当触发中断请求的时候，会自动触发catch，所以需要在catch中判断，是不是手动取消的请求，使用axios.isCancel(thrown)判断

比如现在我们在一个vue组件中，当点击show（）方法时候，显示组件并发送请求，但是由于请求时间过长，点击关闭触发hide方法时候，就要中断请求。如下：

首先是对get二次封装的方法

 export function getHaibao(paramObj, source) {
    const url = window.setting.haibao;
    return get(url, paramObj, source);
}

在组件中使用getHaibao方法：

data() {
    return {
        // 标记变量
        controller: null,
        showHaibao: false
    }
},
methods: {
    hide() {
        this.showHaibao = false;
        // 关闭时候终止请求的发送
        this.constructor.abort();
    },
    async show(video) {
        this.showHaibao = true;
       
        // 创建一个 AbortController 取消请求，如果关闭海报界面那么就取消请求
        const controller = new AbortController();
        // 将拦截器存一下
        this.constructor = controller;
        const result = await getHaibao(
            {
                img: video.poster,
                ...
            },
            controller
        );
        if (result && result.code == 0) {
            // 数据获取成功
        } else {
            this.hide();
        }
    }
}

从v0.22.0开始，Axios 支持以 fetch API 方式——AbortController取消请求：

const controller = new AbortController();
 
axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

相关资料