搭建vue项目配置

axios封装:

https://blog.csdn.net/xjf106/article/details/88744134

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。

---

Axios的中文文档：https://www.kancloud.cn/yunye/axios/234845

 

引入

在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

安装axios和qs依赖

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

使用自定义配置新建一个 axios 实例

根据axios文档，新建一个实例：

var instance = axios.create({
  baseURL: process.env.API_ROOT, 
  timeout: 30 * 1000
})

    // baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。
    // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL

    // process.env.API_ROOT是配置的不同环境的api，详情可看另一篇文章：Vue配置开发，测试，生产环境api

    // timeout 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 timeout 的时间，请求将被中断
 

---

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';

请求拦截

我们在发送请求前可以进行一个请求的拦截，进行一些我们想要的操作

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么

  /* 添加loading S */
  startLoading()
  /* 添加loading E */

  if(config.methods.toUpperCase() === 'GET') {
      config.url += '?_=' + new Date().getTime();    //给get请求加上时间戳
  }
  return config;
}, function (error) {
  // 对请求错误做些什么

  /* 关闭loading S */
  endLoading()
  /* 关闭loading E */

  return Promise.reject(error)
})

响应的拦截

我们在请求响应后可以进行一个响应的拦截，进行一些我们想要的操作。

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么

  /* 关闭loading S */
  endLoading()
  /* 关闭loading E */

  return response
}, function (error) {
  // 对响应错误做点什么

  /* 关闭loading S */
  endLoading()
  /* 关闭loading E */

  return Promise.reject(error)
})

封装get方法和post方法

我们常用的ajax请求方法有get、post、put等方法，相信小伙伴都不会陌生。axios对应的也有很多类似的方法，不清楚的可以看下文档。但是为了简化我们的代码，我们还是要对其进行一个简单的封装。下面我们主要封装两个方法：get 和 post。

var httpRequest = {
  // get请求
  get (url, params) {
    return new Promise((resolve, reject) => {
      instance({
        method: 'get',
        url: url,
        params: params
      }).then(response => {
        // 请求成功
        resolve(response.data)
      }).catch(err => {
        // 请求失败
        console.log('请求失败')
        reject(err)
      })
    })
  },
  // post请求
  post (url, data) {
    return new Promise((resolve, reject) => {
      instance({
        method: 'post',
        url: url,
        data: QS.stringify(data)
      }).then(response => {
        // 请求成功
        resolve(response.data)
      }).catch(err => {
        // 请求失败
        console.log('请求失败')
        reject(err)
      })
    })
  }
}

export default httpRequest

我们使用字面量方法封装好get和post方法后，使用export default导出方法

axios的封装基本就完成了，下面说下api的统一管理

上面说了，我们在api.js中统一管理我们的接口

1、首先，我们在api.js中引入封装的axios，即http.js

import httpRequest from './http'

2、然后，例如我们有一个接口，是一个post请求：

https://baidu.com/User/Login

我们可以在api.js中这样封装：

export default {
  // 接口 登录
  postLogin: p => httpRequest.post('https://baidu.com/User/Login', p)
  
  // 其他接口 xxx
  
}

其他的api接口，就在api.js中继续往下面扩展就可以了。tips：代码千万行，注释第一行，请为每个接口写好注释！！！

3、接下来，我们在main.js里面引用api.js，并把它挂到Vue的原型上

import api from './request/api'
Vue.prototype.$api = api

4、最后，在组件里面调用接口如下：

methods: {
    // 请求 登录接口
    postLogin() {
      this.$api.postLogin({account: '', password: ''}).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error.response)
      })
    }
  },

转载自:https://blog.csdn.net/xjf106/article/details/88744134

---

axios拦截器用法

axios在http.js中，

//设置全局的请求次数,请求间隔
axios.defaults.retry = 3;
axios.defaults.retryDelay = 1000;