vue中请求接口怎么封装公共地址_Vue项目封装请求数据的接口总结

以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请求后台，所以将所有的请求封装起来，方便管理。

一、配置url(可以放在一个js中)

引入axios：import axios from “axios”

配置url

const service=axios.create({

baseURL:请求的地址,

timeout:5000     //访问超时的时间限制

});

抛出(如果是新起的js文件)：export default service;

二、写接口的文件(js文件)

将配置url和axios引入：(例如配置的url文件叫request.js)

2.配置各个接口：(例如叫business.js)

Get请求：

export function testGet(参数){

return request({

method:’get’,

params:{

//json格式，如果有就写，没有就去掉。

}

})

}

Post请求：

export function testPost(参数){

const data={}  //写要传递的参数，json格式

return request({

method:’post,

datatype:’json’,

data

})

}

三、使用

1.引入：import   {要引入的方法名字}   from   business.js

2.使用

TestGet().then(res=>{  //成功进这个 }).catch(err=>{ //报错进这个});

放在当前页面使用的方法里。