axios如何在nodejs项目里封装_vue中axios的使用与封装

分享下我自己的axios封装

axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理

当然首先是npm安装axios 很简单$ npm install axios --save

在src下新建文件夹 service / index.js

接着上代码

1 import axios from 'axios';

2 import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示

3 import router from '../router'

4

5 // 默认超时设置

6 axios.defaults.timeout = 50000;

7

8 // 相对路径设置

9 axios.defaults.baseURL ='';

10

11 //http request 拦截器

12 axios.interceptors.request.use(

13 config => {

14 // 获取token

15 const token = localStorage.getItem('cc_token');

16 // 设置参数格式

17 if(!config.headers['Content-Type']){

18 config.headers = {

19 'Content-Type':'application/json',

20 };

21 }

22 // 添加token到headers

23 if(token){

24 config.headers.token = token

25 }

26 // 鉴权参数设置

27 if(config.method === 'get'){

28 //get请求下 参数在params中,其他请求在data中

29 config.params = config.params || {};

30 let json = JSON.parse(JSON.stringify(config.params));

31 //一些参数处理

32 }else{

33 config.data = config.data || {};

34 //一些参数处理

35 }

36 return config;

37 },

38 err => {

39 return Promise.reject(err);

40 }

41 );

以上请求之前的一些处理就完成了

下面是获得返回的一些处理

//http response 拦截器

axios.interceptors.response.use(

response => {

//一些统一code的返回处理

if(response.data.code === 501){

// 登录验证

//做了个示例跳转项目中登录,并记录下相对路径

router.push({

name:'login',//从哪个页面跳转

query:{

retUrl:window.location.href.split('#')[1] || '',

is_new_user_url:1

}

})

}

return response;

},

error => {

return Promise.reject(error)

}

);

接着把所有请求类型都做下简单封装

/**

* 封装get方法

* @param url

* @param params

* @returns {Promise}

*/

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

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

axios.get(url,{

params:params

})

.then(response => {

if(response.data.code === 200){

//返回成功处理 这里传的啥 后续调用的时候 res就是啥

resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了

}else{

//错误处理

Toast(response.data.msg)

}

})

.catch(err => {

reject(err);

let message = '请求失败!请检查网络';

//错误返回

if(err.response)message=err.response.data.message;

Toast(message)

})

})

}

/**

* 封装post请求

* @param url

* @param data

* @returns {Promise}

*/

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

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

axios.post(url,data)

.then(response => {

if(response.data.code === 200){

resolve(response.data.data);

}else{

Toast(response.data.msg)

}

},err => {

reject(err);

let message = '请求失败!请检查网络';

if(err.response)message=err.response.data.message;

Toast(message)

})

})

}

/**

* 封装patch请求

* @param url

* @param data

* @returns {Promise}

*/

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

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

axios.patch(url,data)

.then(response => {

if(response.data.code === 200){

resolve(response.data.data);

}else{

Toast(response.data.msg)

}

},err => {

reject(err);

let message = '请求失败!请检查网络';

if(err.response)message=err.response.data.message;

Toast(message)

})

})

}

/**

* 封装put请求

* @param url

* @param data

* @returns {Promise}

*/

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

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

axios.put(url,data)

.then(response => {

if(response.data.code === 200){

resolve(response.data.data);

}else{

Toast(response.data.msg)

}

},err => {

reject(err);

let message = '请求失败!请检查网络';

if(err.response)message=err.response.data.message;

Toast(message)

})

})

}

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

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

axios.delete(url,data)

.then(response => {

if(response.data.code === 200){

resolve(response.data.data);

}else{

Toast(response.data.msg)

}

},err => {

reject(err);

let message = '请求失败!请检查网络';

if(err.response)message=err.response.data.message;

Toast(message)

})

})

}

好了 主要的文件编辑好 然后在service中新建api.js文件并引入对应组件方法

import Vue from 'vue';

import {post,fetch,patch,put,del,upload,ret2} from './index'

Vue.prototype.$post=post;

Vue.prototype.$fetch=fetch;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;

Vue.prototype.$del=del;

接着就可以开始写各个API方法了

//也可以不需要

const _baseUrl=process.env.API_URL;//这里我在项目配置文件里面设置了相对路径

//登录方法

const loginURL = `${_baseUrl}api/admin/login`;

export const loginApi = function(json) {

return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})

};

//修改账号信息RESTful

const editAdminUrl = `${_baseUrl}api/admin/user/info`;

export const editAdminListApi = function (id,json) {

return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)

};

//等等...

最后是使用,非常简单方便,在vue文件中引入并使用

import { loginApi ,editAdminListApi } from "../../service/api";

export default {

methods:{

//登录

login(){

let json = {

userName:'xx',

password:'xx'

}

loginApi().then(res=>{

console.log(res)

})

},

// RESTful 修改信息

editAdminList(){

let id = 1;

let json = {name:11};

editAdminListApi(id,json).then(res=>{

console.log(res)

})

}

}

}

使用方便简洁。

over

vue中axios的二次封装

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

对于vue中axios拦截器简单封装

axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if ( ...

聊聊 Vue 中 axios 的封装

聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

Vue中axios的封装和api接口的统一管理

更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

vue中Axios请求豆瓣API数据并展示到Swipe中

vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

vue中axios的深入使用

如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用  先对工具类进行封装utils/axios.js: // 引入模 ...

vue中axios的安装使用

axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法. 安装 npm install axios -S 在main.js配置 import axios ...

vue中axios使用二:axios以post,get,jsonp的方式请求后台数据

本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...

vue中axios 配置请求拦截功能 及请求方式如何封装

main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

随机推荐

Bootstrap Table Examples

The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

flex布局滑动页面

html:

你可能感兴趣的:(axios如何在nodejs项目里封装_vue中axios的使用与封装)