vue2中通过封装axios方法请求后台接口

后台接口"/>

vue2中通过封装axios方法请求后台接口

如何在vue2中通过封装axios方法请求后台接口？

废话不多说直接进入正题

axios官网： axios中文文档|axios中文网 | axios (axios-js)

通过npm install axios安装axios

以及npm install qs 安装qs

配置拦截器

 部分接口的数据会需要进行qs转换 

    if(config.data&&!(config.data instanceof FormData)){config.data=qs.stringify(config.data)}

定义方法

常用的方法有四个

get获取数据

export function get(url, data) {return new Promise((rel, rej) => {instance.get(url, { params: data }).then((res) => rel(res)).catch((error) => rej(error));});
}

post提交数据(一般用来做表单提交)

export function post(url, data) {return new Promise((rel, rej) => {instance.post(url, data).then((res) => rel(res)).catch((error) => rej(error));});
}

 put修改数据

export function put(url, data) {return new Promise((rel, rej) => {instance.put(url, data).then((res) => rel(res)).catch((error) => rej(error));});
}

 delete删除数据

export function deleter(url, data) {return new Promise((rel, rej) => {instance.delete(url, { params: data }).then((res) => rel(res)).catch((error) => rej(error));});
}

上述操作完毕后在需要用到的地方引用即可

import {get,post,put,deleter} from '@/utils/request.js'