axios如何在nodejs项目里封装_vue项目axios封装、easymock使用

vue全家桶概括下来就是

项目构建工具(vue-cli)

路由(vue-router)

状态管理(vuex)

http请求工具

vue有自己的http请求工具插件vue-resource&＃xff0c;但是vue2.0后作者就不在更新了&＃xff0c;后更推荐axios。

下面是vue项目中axios常用的方法&＃xff0c;以及生成虚拟数据的easy-mock的使用方法。

一、axios安装和easy-mock的使用

1. axios

特点

浏览器端发起XMLHttpRequests请求

node端发起http请求

支持Promise API

监听请求和返回

转化请求和返回

取消请求

自动转化json数据

客户端支持抵御

安装

npm install --save axios

为了解决post默认使用的是x-www-from-urlencoded 去请求数据&＃xff0c;导致请求参数无法传递到后台&＃xff0c;所以还需要安装一个插件QS

npm install qs

2. easy-mock

Easy Mock 是一个可视化&＃xff0c;并且能快速生成 模拟数据 的持久化服务。不需要再本地安装&＃xff0c;只需要到官网上注册登陆后加入或新建项目&＃xff0c;在项目内定义接口和返回数据的格式。

步骤如下&＃xff1a;

1)登陆

2)新建项目

3)新建接口&＃xff0c;Base URL是访问地址

4)定义接口名称和数据返回格式

这样一个接口就定义好了&＃xff0c;我们可以通过请求工具访问&＃xff0c;就可以得到 /login中刚定义的数据。更多定义easy-mock返回数据格式的方式&＃xff0c;具体请参考官网例子。参考其他例子&＃xff1a;https://blog.csdn.net/qq_42991509/article/details/94577331

二、axios 使用

axios的实例方法和配置很多&＃xff0c;下面只是常用基本的封装和使用方式。

在vue项目中src文件夹下&＃xff0c;有这几个需要新增的地方。

1.  appCount.js文件

const HTTP_BASE_URL &＃61; &＃39;https://www.easy-mock.com/mock/5d5f5a3f6778c215243b94ea/&＃39; // easy-mock

const TOKEN &＃61; &＃39;1234&＃39; // token

export default {

HTTP_BASE_URL,

TOKEN

}

在appCount.js文件中&＃xff0c;我们可以放一些全局的变量。例如&＃xff1a;访问地址的ip、token常量&＃xff0c;超时取消请求的时常等。

2. request.js文件

import axios from &＃39;axios&＃39;

import appCONST from &＃39;./appCount.js&＃39;

const requestData &＃61; async (url, params &＃61; {}) &＃61;> {

let res &＃61; await axios({

url: appCONST.HTTP_BASE_URL &＃43; url,

data: params || {},

method: params.method || &＃39;POST&＃39;,

header: params.header || {

&＃39;content-type&＃39;: &＃39;application/json&＃39;

}

})

console.log(res)

if(requestSuccess(res)) {

return res.data

} else {

throw requestException(res)

}

}

/**

* 请求成功

*/

function requestSuccess(res) {

const status &＃61; res.status

// 请求错误

if (status !&＃61;&＃61; 200) {

return false

}

const resData &＃61; res.data

return !(resData && resData.code !&＃61;&＃61; 1)

}

/**

* 异常

*/

function requestException(res) {

const error &＃61; {}

error.serverCode &＃61; res.status

const resData &＃61; res.data

error.code &＃61; resData.code

error.msg &＃61; resData.msg || &＃39;系统错误&＃39;

error.data &＃61; resData.result || {}

return error

}

// 导出封装函数

export default {

requestData

}

在上面文件中&＃xff0c;requestData方法是我们封装的axios请求&＃xff0c;在方法中&＃xff0c;我并没有使用到安装时qs。因为在方法中定义了请求头content-type的类型是json格式&＃xff0c;所以参数格式直接传对象进来就可以了。

如果没有定义content-type的类型&＃xff0c;那么默认是application/x-www-form-urlencoded。请求参数在Form Data中&＃xff0c;只能上传键值对&＃xff0c;并且键值对都是间隔分开的。

参数形式:  name1&＃61;value1&name2&＃61;value2。那么最好引入qs&＃xff0c;然后将params格式化一下&＃xff0c;data:qs.stringify(params)。

3. util.js

可以写一些公共的方法&＃xff0c;例如&＃xff1a;存取本地缓存&＃xff0c;参数格式化等方法。然后在需要用到的地方导入这个文件&＃xff0c;就可以使用其中的方法了。

export const localSave &＃61; (key, value) &＃61;> {

localStorage.setItem(key, value)

}

export const localRead &＃61; (key) &＃61;> {

return localStorage.getItem(key) || &＃39;&＃39;

}

使用方式

import * as util from &＃39;&＃64;/libs/util&＃39;

export default {

name: &＃39;login&＃39;,

data() {

return {

da:&＃39;&＃39;

}

},

methods: {

submit() {

util.localSave(&＃39;data&＃39;, &＃39;123&＃39;)

}

}

}

4. api.js

import wxRequest from &＃39;../libs/request&＃39;

// 用户登录

const login &＃61; (params) &＃61;> wxRequest.requestData(&＃39;login&＃39;, params)

export default {

login

}

5. 调用接口

import api from &＃39;&＃64;/api/api&＃39;

export default {

name: &＃39;login&＃39;,

data() {

return {

da:&＃39;&＃39;

}

},

methods: {

async submit() {

try {

const dd &＃61; await api.login()

console.log(dd)

} catch(err) {

console.log(err)

}

}

}

}

更多方法&＃xff0c;例如添加拦截器也挺好用。