axios在实际项目中的使用介绍

1.axios本身就封装了各种数据请求的方法

 执行 GET 请求

 // 为给定 ID 的 user 创建请求
 axios.get('/user?ID=12345')
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

 // 可选地，上面的请求可以这样做
 axios.get('/user', {
     params: {
       ID: 12345
     }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

 执行 POST 请求

 axios.post('/user', {
     firstName: 'Fred',
     lastName: 'Flintstone'
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

2.这里我们根据axios提供的别名，进行调整

 新建一个目录叫baseUrl，接着新建一个文件叫baseUrl.js
 1）首先我们在开发过程中，会有不同的环境，这里指的是，后端会在不同的环境给我们提供对应的接口（开发环境，测试环境，灰度，线上）这个时候，我们就要对接口的baseUrl做统一处理（这样代码每推到一个环境，我们就不用做任何改变）
 // 获取api的baseUrl
 export default function getBaseUrl () {
 　　let [baseUrl, urls, protocol] = ['开发环境的api的baseUrl', location.href.toLowerCase(), 'http://']
 //判断协议，看是http还是https
 　　if (location.protocol === 'https:') {
 　　　　protocol = 'https://'
 　　}
 //一般api的baseUrl是和域名相同的，这里我们就通过域名来判断
 　　if (urls.match(/测试环境的baseUrl/) && urls.match(/测试环境的baseUrl/)[0] === '测试环境的域名') {
 　　　　baseUrl = protocol + '测试环境的域名'
 　　}
 //线上的
 　　if (urls.match(/线上环境的域名/) && urls.match(/线上环境的域名/)[0] === '线上环境的域名') {
 　　　　baseUrl = protocol + '线上的域名'
 　　}
 　　return baseUrl
 }

3.现在我们根据axios提供的请求别名，处理两个我们常用的请求方法

 新建一个文件就叫axios.js
 1）首先我们使用es6提供的方法，引入axios和我们封装的getBaseUrl方法
 import axios from 'axios'
 import getBaseUrl from '文件路径'

 2)配置config
 let baseUrl = getBaseUrl()
 //这里我们只介绍这两个配置项，其他的不做详细解释，想要查看更多内容请参考官方文档
 const config ={
      //baseURL将自动加在url（这个url也就是'/'的路径）上
      baseURL:baseUrl，
      //表示跨域请求时是否需要使用凭证，默认是false，但是对于一些，有登陆时效或者cookie凭证的请求时，这个最好加上
      withCredentials: false
 }

 3）处理get请求传递过来的参数（因为get请求的参数是拼接在请求地址上的，所以这里我们需要手动处理一下get请求的url）
 let urlEncode = (url, data) => {
 　　if (typeof (url) === 'undefined' || url === null || url === '') return ''
 　　if (typeof (data) === 'undefined' || data === null || typeof (data) !== 'object') return url
 　　url += (url.indexOf('?') !== -1) ? '' : '?'
 　　for (let k in data) {
 　　　　url += ((url.indexOf('=') !== -1) ? '&' : '') + k + '=' + encodeURI(data[k])
 　　}
 　　return url
 }

 4）封装post和get请求

 const get = (url, params) => {
      //这里的url是请求数据的传递过来的
      url = urlEncode(url, params)
      return axios.get(url,config)
 }

 consot post = (url, params) => {
      return axios.post(url, params, config)
 }

 5)将post和get方法暴露出去

 export {
      get,
      post
 }

4.根据不同的接口封装不同的请求方法（这个方法是用来直接获取数据的）

 1)引入我们第三部处理好的post和get请求方法
 import * as axios from '文件路径'

 2）封装
 const Logins = params => axios.post('/user/login', params)

 const List = params => axios.get('/list', params)

5.在组件中使用

 1）引入我们第四步处理好的方法（需要什么引入什么）
 import { Logins, List } from '文件路径'
 _Login () {
 // 测试
 Logins({
   user_name: 'user_name',
   pass: 'pass'
 }).then(data => {
 if (data.data.code === '0') {
   console.log(data)
 }
 })
 }
 ......