axios如何在nodejs项目里封装_vue：axios二次封装，接口统一存放

一、基于框架：vue

二、基于http库：axios

三、基本用法：

1.通过node安装：

npm install axios

2. 在项目目录的src文件夹下新建providers文件夹，在该文件夹内新建http-service.js文件，内容如下代码块：

import axios from 'axios';

axios.defaults.timeout = 5000;

axios.defaults.baseURL ='http://www.baidu.com'; //填写域名

//http request 拦截器

axios.interceptors.request.use(

config => {

config.data = JSON.stringify(config.data);

config.headers = {

'Content-Type':'application/x-www-form-urlencoded'

}

return config;

},

error => {

return Promise.reject(err);

}

);

//响应拦截器即异常处理

axios.interceptors.response.use(response => {

return response

}, err => {

if (err && err.response) {

switch (err.response.status) {

case 400:

console.log('错误请求')

break;

case 401:

console.log('未授权，请重新登录')

break;

case 403:

console.log('拒绝访问')

break;

case 404:

console.log('请求错误,未找到该资源')

break;

case 405:

console.log('请求方法未允许')

break;

case 408:

console.log('请求超时')

break;

case 500:

console.log('服务器端出错')

break;

case 501:

console.log('网络未实现')

break;

case 502:

console.log('网络错误')

break;

case 503:

console.log('服务不可用')

break;

case 504:

console.log('网络超时')

break;

case 505:

console.log('http版本不支持该请求')

break;

default:

console.log(`连接错误${err.response.status}`)

}

} else {

console.log('连接到服务器失败')

}

return Promise.resolve(err.response)

})

/**

* 封装get方法

* @param url

* @param data

* @returns {Promise}

*/

export function fetch(url,params={}){

return new Promise((resolve,reject) => {

axios.get(url,{

params:params

})

.then(response => {

resolve(response.data);

})

.catch(err => {

reject(err)

})

})

}

/**

* 封装post请求

* @param url

* @param data

* @returns {Promise}

*/

export function post(url,data = {}){

return new Promise((resolve,reject) => {

axios.post(url,data)

.then(response => {

resolve(response.data);

},err => {

reject(err)

})

})

}

/**

* 封装patch请求

* @param url

* @param data

* @returns {Promise}

*/

export function patch(url,data = {}){

return new Promise((resolve,reject) => {

axios.patch(url,data)

.then(response => {

resolve(response.data);

},err => {

reject(err)

})

})

}

/**

* 封装put请求

* @param url

* @param data

* @returns {Promise}

*/

export function put(url,data = {}){

return new Promise((resolve,reject) => {

axios.put(url,data)

.then(response => {

resolve(response.data);

},err => {

reject(err)

})

})

}

/**

* 下面是获取数据的接口

*/

/**

* 测试接口

* 名称：exam

* 参数：paramObj/null

* 方式：fetch/post/patch/put

*/

export const server = {

exam: function(paramObj){

return post('/api.php?ac=v2_djList',paramObj);

}

}

3.在main.js内引用以上的http-service.js文件：

import {server} from './providers/http-service'

//定义全局变量

Vue.prototype.$server=server;

四、测试用例

export default {

methods:{

exam: function(){

let paramObj = {

uid: '123456'

}

this.$server.exam(paramObj).then(data => {

console.log(data)

})

}

}

}

在网友们写的封装方法基础上做了一些修改，目前在自己的项目组件化中使用，有写的不对的地方欢迎大家留言指出~

想学前端的小伙伴，可以关注+私信回复《资料》免费获取哦~

感谢您的阅读！喜欢的可以收藏转发哦~