还有就是今天要聊的是,Vue项目中Axios的简单封装

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。本文重点介绍在Vue项目中简单封装Axios

Vue推荐我们使用Axios,vue-resource在Vue2.0后就不再更新,本文对Axios的用法不做过多的介绍,只是在项目上简单封装及使用,如果有需要了解的,可以访问github

https://github.com/axios/axios

1 安装

介绍比较常用的两种方式

# npm
npm install axios 

# yarn
yarn add axios

2 引用

因为axios不是Vue的插件,所以不能使用use方式

import axios from 'axios'

3 封装的原因

其实axios用法很简单,请求方式也是支持的很全面,为什么我们要再次封装呢,通常我们的项目会有很多页面,同时也会有很多接口,请求方式也是会有很多种,如果不统一封装,后期修改会很繁琐,也不容易维护和迭代。

4 分析

既然要封装,那我们肯定要考虑的比较全面,把项目中用到的可能性都要考虑进来,所以我们从以下几方面考虑:

  1. 请求是否需要设置请求头(一般可能需要设置token)
  2. 请求方式(get、post、delete等)
  3. 请求地址(这个地址不是全路径,后面分析)
  4. 请求参数(每个接口不一定都需要参数)

重点说下第二个请求方式中的get请求,我们项目上get请求也有两种情况,一种是参数以&拼接,

/sys/user/login?name=value&name1=value1

另一种是以/方式拼接,

/sys/user/login/value/value1

为什么要重点说呢,因为如果是&拼接的话,需要使用 params对象,而不是data

5 封装

既然分析完了,那就动手写代码,新建request.js文件,引用axios

import axios from 'axios'

编写封装方法,此方法接收五个参数,请求方式、请求地址、请求参数(非必填)、请求模式(针对get,非必填)、请求头设置(非必填)。

import axios from 'axios';

/**
 * axios 
 * @param:{string}     method          请求类型,必填
 * @param:{string}     url             请求地址,必填
 * @param:{string}     params          请求参数,非必填
 * @param:{string}     type            请求模式,针对get,params/data
 * @param:{string}     variation       请求头,非必填
 **/
export const liRequest = (method, url, params = {}, type = "data", isToken = true) => {
    let headers = { 'Content-Type': 'application/json', }
    if (isToken) {
        headers['Authorization'] = 'token'
    }
    if (method == 'get' || type == "params") {
        console.log("params")
        return axios({
            method: method,
            url: url,
            headers: headers,
            params: params
        }).then(res => res.data);
    } else {
        return axios({
            method: method,
            url: url,
            headers: headers,
            data: params
        }).then(res => res.data);
    }

};

token这个是随便写的,因为每个系统后台要求的都不相同,所以用token代替,导出这个liRequest方法就可以直接使用了。

get请求,不需要参数,不需要token

liRequest('get', '/user/page', query, 'params',false)

get请求,需要参数,并且需要token

liRequest('get', '/user/page','params',query)

post请求,需要参数及token

liRequest('post', '/user/page', query)

简单的罗列几种写法,这种写法可能考虑的不是很全面,有更好的方式可以下方留言。

正文完