axios的封装

安装

npm install axios; //命令行安装axios

引入

首先，新建一个js文件用于引入axios。比如说，新建一个http.js文件，在文件中引入步骤如下所示：

import QS from 'qs';//引入qs模块，为post型数据提供序列化（非常重要）
import { Toast } from 'vant';# 设置请求超时
axios.defaults.timeout = 10000: //设置超时时间为10s```# 设置post请求方式请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

设置请求拦截

首先，导入vuex。因为下面需要使用到里面的状态对象，用于实现登录认证功能。
代码如下：

    config => {  const token = store.state.token;        token && (config.headers.Authorization = token);        return config;    },    error => {        return Promise.error(error);
})

注：在每次发送请求之前判断store中是否存在token，如果存在的话就将其添加到http请求的请求头当中去，用于后台通过token判断用户登录情况。同时，还存在一种情况是，token可能是过期的。所以在响应拦截器中要对返回状态进行判断。（响应拦截下面会讲到）

响应拦截


axios.interceptors.response.use(    response => {   if (response.status === 200) {            return Promise.resolve(response);        } else {            return Promise.reject(response);        }    },    error => {            if (error.response.status) {            switch (error.response.status) {     //请求返回的错误妈需要与后台开发人员协商好，以便更快的定位错误。          case 401:    //用户未登录       router.replace({                        path: '/login',                        query: { redirect: router.currentRoute.fullPath }});break;             case 403: //token过期Toast({message: '登录已过期，请重新登录',duration: 1000,forbidClick: true});localStorage.removeItem('token');store.commit('loginSuccess', null);setTimeout(() => {                        router.replace({                            path: '/login',                            query: { redirect: router.currentRoute.fullPath }                        });                    }, 1000);                    break; case 404:   //请求错误Toast({message: '该请求不存在',duration: 1500,forbidClick: true});break;default:  // 其它错误，直接抛出错误提示Toast({message: error.response.data.message,duration: 1500,forbidClick: true});}return Promise.reject(error.response);}}
});

接下来是，封装get()和post()方法

//axios对应的请求方式有很多，这里主要讲解get与post。
首先是get方法的封装，封装方式如下：

export function get(url, params){    return new Promise((resolve, reject) =>{        axios.get(url, {            params: params        }).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)        })
});

通过上面的代码，我们可以看到，get函数有两个参数。第一个参数代表的是我们要请求的url地址，第二个参数代表的是请求该url时携带的请求参数。接下来是get请求返回的promise对象，成功时返回resolve，失败时返回reject。

export function post(url, params) {return new Promise((resolve, reject) => {axios.post(url, QS.stringify(params)).then(res => {resolve(res.data);}).catch(err =>{reject(err.data)})});
}

post方法的封装与上面的get类似，不同之处在于，post在提交参数的书写方式。post所携带的第二个参数是一个参数对象（在这里用到了QS模块！！！），而get的第二个参数是一个{ }。

以上呢，就是axios的基本封装了！

那么，当我们封装好axios以后要如何去使用呢？接下来我们就一起去了解一下api接口的实现》》》》

实现创建一个js接口文件，统一管理接口。
然后在该文件中引入get()和post()

//api.js
import {get, post} from './http.js';
export const login = p => post('http://www.xxxx.com/api/', p)

在这里我们定义了一个login方法，这个方法有一个参数p，它是请求该接口时携带的参数对象。另一个url就是我们请求接口的地址。

这样，我们就写好了一个api接口了，接下来就是在页面方法中引用。

//login.vue
import {login} from '@/request/api';export default {name: 'login',methods: {onLogin() {login({userName: 123,passWord: xxxx,}).then(res = > {console.log(res)})}}
}

以上就是最基本的axios封装啦～～～～～

Vue中axios的封装相关推荐

axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
vue中axios的封装以及使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.axios 在src下新建 network 文件夹 network文件夹: 网络模块放网络请求 ind ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
解决vue中axios同步的问题
解决vue中axios同步的问题参考文章: (1)解决vue中axios同步的问题 (2)https://www.cnblogs.com/zhupanpan/p/11319305.html 备忘一下 ...

Vue中axios的封装