一, axios 的封装
在 vue 项目中, 和后台交互获取数据这块, 我们通常使用的是 axios 库, 它是基于 promise 的 http 库, 可运行在浏览器端和 node.js 中. 他有很多优秀的特性, 例如拦截请求和响应, 取消请求, 转换 json, 客户端防御 XSRF 等. 所以我们的尤大大也是果断放弃了对其官方库 vue-resource 的维护, 直接推荐我们使用 axios 库. 如果还对 axios 不了解的, 可以移步 axios 文档.
安装
npm install axios; // 安装 axios 复制代码
引入
一般我会在项目的 src 目录中, 新建一个 request 文件夹, 然后在里面新建一个 http.js 和一个 api.js 文件. http.js 文件用来封装我们的 axios,api.js 用来统一管理我们的接口.
- // 在 http.js 中引入 axios
- import axios from 'axios'; // 引入 axios
- import QS from 'qs'; // 引入 qs 模块, 用来序列化 post 类型的数据, 后面会提到
- // vant 的 toast 提示框组件, 大家可根据自己的 ui 组件更改.
- import {Toast} from 'vant';
环境的切换
我们的项目环境可能有开发环境, 测试环境和生产环境. 我们通过 node 的环境变量来匹配我们的默认的接口 url 前缀. axios.defaults.baseURL 可以设置 axios 的默认请求地址就不多说了.
- // 环境的切换
- if (process.env.NODE_ENV == 'development') {
- axios.defaults.baseURL = 'https://www.baidu.com';}
- else if (process.env.NODE_ENV == 'debug') {
- axios.defaults.baseURL = 'https://www.ceshi.com';
- }
- else if (process.env.NODE_ENV == 'production') {
- axios.defaults.baseURL = 'https://www.production.com';
- }
设置请求超时
通过 axios.defaults.timeout 设置默认的请求超时时间. 例如超过了 10s, 就会告知用户当前请求超时, 请刷新等.
axios.defaults.timeout = 10000; 复制代码
post 请求头的设置
post 请求的时候, 我们需要加上一个请求头, 所以可以在这里进行一个默认的设置, 即设置 post 的请求头为 application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
请求拦截
我们在发送请求前可以进行一个请求的拦截, 为什么要拦截呢, 我们拦截请求是用来做什么的呢? 比如, 有些请求是需要用户登录之后才能访问的, 或者 post 请求的时候, 我们需要序列化我们提交的数据. 这时候, 我们可以在请求被发送之前进行一个拦截, 从而进行我们想要的操作.
请求拦截
- // 先导入 vuex, 因为我们要使用到里面的状态对象
- // vuex 的路径根据自己的路径去写
- import store from '@/store/index';
- // 请求拦截器 axios.interceptors.request.use(
- config => {
- // 每次发送请求之前判断 vuex 中是否存在 token
- // 如果存在, 则统一在 http 请求的 header 都加上 token, 这样后台根据 token 判断你的登录情况
- // 即使本地存在 token, 也有可能 token 是过期的, 所以在响应拦截器中要对返回状态进行判断
- const token = store.state.token;
- token && (config.headers.Authorization = token);
- return config;
- },
- error => {
- return Promise.error(error);
- })
这里说一下 token, 一般是在登录完成之后, 将用户的 token 通过 localStorage 或者 cookie 存在本地, 然后用户每次在进入页面的时候 (即在 main.js 中), 会首先从本地存储中读取 token, 如果 token 存在说明用户已经登陆过, 则更新 vuex 中的 token 状态. 然后, 在每次请求接口的时候, 都会在请求的 header 中携带 token, 后台人员就可以根据你携带的 token 来判断你的登录是否过期, 如果没有携带, 则说明没有登录过. 这时候或许有些小伙伴会有疑问了, 就是每个请求都携带 token, 那么要是一个页面不需要用户登录就可以访问的怎么办呢? 其实, 你前端的请求可以携带 token, 但是后台可以选择不接收啊!
响应的拦截
- // 响应拦截器
- axios.interceptors.response.use(
- response => {
- // 如果返回的状态码为 200, 说明接口请求成功, 可以正常拿到数据
- // 否则的话抛出错误
- if (response.status === 200) {
- return Promise.resolve(response);
- } else {
- return Promise.reject(response);
- }
- },
- // 服务器状态码不是 2 开头的的情况
- // 这里可以跟你们的后台开发人员协商好统一的错误状态码
- // 然后根据返回的状态码进行一些操作, 例如登录过期提示, 错误提示等等
- // 下面列举几个常见的操作, 其他需求可自行扩展
- error => {
- if (error.response.status) {
- switch (error.response.status) {
- // 401: 未登录
- // 未登录则跳转登录页面, 并携带当前页面的路径
- // 在登录成功后返回当前页面, 这一步需要在登录页操作.
- case 401:
- router.replace({
- path: '/login',
- query: {
- redirect: router.currentRoute.fullPath
- }
- });
- break;
- // 403 token 过期
- // 登录过期对用户进行提示
- // 清除本地 token 和清空 vuex 中 token 对象
- // 跳转登录页面
- case 403:
- Toast({
- message: '登录过期, 请重新登录',
- duration: 1000,
- forbidClick: true
- });
- // 清除 token
- localStorage.removeItem('token');
- store.commit('loginSuccess', null);
- // 跳转登录页面, 并将要浏览的页面 fullPath 传过去, 登录成功后跳转需要访问的页面
- setTimeout(() => {
- router.replace({
- path: '/login',
- query: {
- redirect: router.currentRoute.fullPath
- }
- });
- }, 1000);
- break;
- // 404 请求不存在
- 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);
- }
- }
- });
响应拦截器很好理解, 就是服务器返回给我们的数据, 我们在拿到之前可以对他进行一些处理. 例如上面的思想: 如果后台返回的状态码是 200, 则正常返回数据, 否则的根据错误的状态码类型进行一些我们需要的错误, 其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作.
要注意的是, 上面的 Toast() 方法, 是我引入的 vant 库中的 toast 轻提示组件, 你根据你的 ui 库, 对应使用你的一个提示组件.
封装 get 方法和 post 方法
我们常用的 ajax 请求方法有 get,post,put 等方法, 相信小伙伴都不会陌生. axios 对应的也有很多类似的方法, 不清楚的可以看下文档. 但是为了简化我们的代码, 我们还是要对其进行一个简单的封装. 下面我们主要封装两个方法: get 和 post.
get 方法: 我们通过定义一个 get 函数, get 函数有两个参数, 第一个参数表示我们要请求的 url 地址, 第二个参数是我们要携带的请求参数. get 函数返回一个 promise 对象, 当 axios 其请求成功时 resolve 服务器返回 值, 请求失败时 reject 错误值. 最后通过 export 抛出 get 函数.
- /**
- * get 方法, 对应 get 请求
- * @param {String} url [请求的 url 地址]
- * @param {Object} params [请求时携带的参数]
- */
- 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)
- })
- });}
post 方法: 原理同 get 基本一样, 但是要注意的是, post 方法必须要使用对提交从参数对象进行序列化的操作, 所以这里我们通过 node 的 qs 模块来序列化我们的参数. 这个很重要, 如果没有序列化操作, 后台是拿不到你提交的数据的. 这就是文章开头我们 import QS from 'qs'; 的原因. 如果不明白序列化是什么意思的, 就百度一下吧, 答案一大堆.
- /**
- * post 方法, 对应 post 请求
- * @param {String} url [请求的 url 地址]
- * @param {Object} params [请求时携带的参数]
- */
- 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)
- })
- });
- }
这里有个小细节说下, axios.get() 方法和 axios.post() 在提交数据时参数的书写方式还是有区别的. 区别就是, get 的第二个参数是一个 {}, 然后这个对象的 params 属性值是一个参数对象的. 而 post 的第二个参数就是一个参数对象. 两者略微的区别要留意哦!
axios 的封装基本就完成了, 下面再简单说下 api 的统一管理.
整齐的 api 就像电路板一样, 即使再复杂也能很清晰整个线路. 上面说了, 我们会新建一个 api.js, 然后在这个文件中存放我们所有的 api 接口.
首先我们在 api.js 中引入我们封装的 get 和 post 方法
/**
* api 接口统一管理
*/
import { get, post } from './http'复制代码
现在, 例如我们有这样一个接口, 是一个 post 请求:
http://www.baiodu.com/api/v1/users/my_address/address_edit_before
我们可以在 api.js 中这样封装:
export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);
我们定义了一个 apiAddress 方法, 这个方法有一个参数 p,p 是我们请求接口时携带的参数对象. 而后调用了我们封装的 post 方法, post 方法的第一个参数是我们的接口地址, 第二个参数是 apiAddress 的 p 参数, 即请求接口时携带的参数对象. 最后通过 export 导出 apiAddress.
然后在我们的页面中可以这样调用我们的 api 接口:
- import { apiAddress } from '@/request/api';// 导入我们的 api 接口
- export default {
- name: 'Address',
- created () {
- this.onLoad();
- },
- methods: {
- // 获取数据
- onLoad() {
- // 调用 api 接口, 并且提供了两个参数
- apiAddress({
- type: 0,
- sort: 1
- }).then(res => {
- // 获取数据成功后的其他操作
- ..................
- })
- }
- }
- }
其他的 api 接口, 就在 pai.js 中继续往下面扩展就可以了. 友情提示, 为每个接口写好注释哦!!!
api 接口管理的一个好处就是, 我们把 api 统一集中起来, 如果后期需要修改接口, 我们就直接在 api.js 中找到对应的修改就好了, 而不用去每一个页面查找我们的接口然后再修改会很麻烦. 关键是, 万一修改的量比较大, 就规格 gg 了. 还有就是如果直接在我们的业务代码修改接口, 一不小心还容易动到我们的业务代码造成不必要的麻烦.
好了, 最后把完成的 axios 封装代码奉上.
- /*
- **axios 封装
- * 请求拦截, 相应拦截, 错误统一处理
- */
- import axios from 'axios';import QS from 'qs';
- import { Toast } from 'vant';
- import store from '../store/index'
- // 环境的切换
- if (process.env.NODE_ENV == 'development') {
- axios.defaults.baseURL = '/api';
- } else if (process.env.NODE_ENV == 'debug') {
- axios.defaults.baseURL = '';
- } else if (process.env.NODE_ENV == 'production') {
- axios.defaults.baseURL = 'http://api.123dailu.com/';
- }
- // 请求超时时间
- axios.defaults.timeout = 10000;
- // post 请求头
- axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
- // 请求拦截器
- axios.interceptors.request.use(
- config => {
- // 每次发送请求之前判断是否存在 token, 如果存在, 则统一在 http 请求的 header 都加上 token, 不用每次请求都手动添加了
- // 即使本地存在 token, 也有可能 token 是过期的, 所以在响应拦截器中要对返回状态进行判断
- const token = store.state.token;
- token && (config.headers.Authorization = token);
- return config;
- },
- error => {
- return Promise.error(error);
- })
- // 响应拦截器
- axios.interceptors.response.use(
- response => {
- if (response.status === 200) {
- return Promise.resolve(response);
- } else {
- return Promise.reject(response);
- }
- },
- // 服务器状态码不是 200 的情况
- error => {
- if (error.response.status) {
- switch (error.response.status) {
- // 401: 未登录
- // 未登录则跳转登录页面, 并携带当前页面的路径
- // 在登录成功后返回当前页面, 这一步需要在登录页操作.
- case 401:
- router.replace({
- path: '/login',
- query: { redirect: router.currentRoute.fullPath }
- });
- break;
- // 403 token 过期
- // 登录过期对用户进行提示
- // 清除本地 token 和清空 vuex 中 token 对象
- // 跳转登录页面
- case 403:
- Toast({
- message: '登录过期, 请重新登录',
- duration: 1000,
- forbidClick: true
- });
- // 清除 token
- localStorage.removeItem('token');
- store.commit('loginSuccess', null);
- // 跳转登录页面, 并将要浏览的页面 fullPath 传过去, 登录成功后跳转需要访问的页面
- setTimeout(() => {
- router.replace({
- path: '/login',
- query: {
- redirect: router.currentRoute.fullPath
- }
- });
- }, 1000);
- break;
- // 404 请求不存在
- 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 方法, 对应 get 请求
- * @param {String} url [请求的 url 地址]
- * @param {Object} params [请求时携带的参数]
- */
- 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)
- })
- });
- }
- /**
- * post 方法, 对应 post 请求
- * @param {String} url [请求的 url 地址]
- * @param {Object} params [请求时携带的参数]
- */
- 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)
- })
- });
- }
来源: http://www.qdfuns.com/article/20013/843c5d7b83343778ebcd66a9dc087301.html