axios http请求

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

功能

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF

安装

使用npm

npm install axios

使用 bower

bower install axios

使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

这里整理一下axios基于vue项目的封装

• 对于小项目，请求也比较少的，也不用带token去请求数据可以直接axios文档中的方法就不用封装了（封装请求也不是不可以~~）

1. 在main.js中引入axios

//main.js
import Axios from 'axios'
Vue.prototype.$axios = Axios

2. 页面中使用

// 参考axios官网中例子
// 为给定 ID 的 user 创建请求
this.$axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• 封装

1. 在utils文件下面新建一个request.js(请求分装)和tips.js(提示)

//request.js
import axios from 'axios'  //引入axios
import store from 'store'  //引入store ,在拦截时的操作
import {requestError , authInvalid } from 'store'  //引入store ,在拦截时的操作
import * as Setting from '@/setting.js'  //这里设置环境
//创建一个axios示例
const service = axios.create({
//全局的 axios 默认值
  baseURL:Setting.requestPath , //请求基路径，根据node的环境变量来匹配我们的默认的接口url前缀
  timeout:3000  //超时
})

//设置请求拦截器（多数情况下是验证token）
service.interceptors.request.use(
  config => { //请求成功
    //这里最先拿到你的request
    //这里token是存储在vuex中，当然也可以存在cookies，sessionStorage
    if(store.state.token){  //如果存在token 每次请求带token请求数据
      let token = store.state.token
      config.headers['X-Access-Token'] = token
    }else{
      //token失效、没有token，跳转登录，重新获取token
      authInvalid () //定义好的方法，提示token失效
      store.dispatch('user/logout') //跳转登录，清除token
    }
      return config  //一定要返回
  } ,
  error => {  //请求错误
    //这里极少情况会进来，暂时没有找到主动触发得方法，
    return Promise.reject(error) //一定要返回
  } 
)
//设置响应拦截器（服务端返回的响应）
service.interceptors.response.use(
  response => {
    //这里最先拿到你的response,如果响应成功都会进入这里
    if(response.data.code === 401){
      requestError ()
    }else if(response.data.code === 404){
      //针对服务端返回的状态码做出响应的提示和操作
    }
    return response
  },
  error => {
      //目前发现三种情况会进入这里，
            //1.http状态码非2开头的，404，405等
            //2.取消请求也会进入这里，cancelToken,
            //3.请求运行异常也会进入这里，如将header写错、或者request中有语法错误也会进入这里
            //进入这里意味着请求失败，axios进入catch分支
      if(response.data.message=== 'token失效'){
      //token失效-和请求拦截时没有token相同的操作
      authInvalid () //定义好的方法，提示token失效
      store.dispatch('user/logout') //跳转登录，清除token
    }else if(response.data.code === 404){
      //针对服务端返回的状态码做出响应的提示和操作
    }
    return Promise.reject(error)  
  }
)

//将示例导出去
export default service

2. 在src新建一个api文件夹，再新建index.js 和api.js

//api.js
import request form '@/utils/request.js'
//这里设置请求api-get
export function requestUserData(){
  return request({
    url:'/userInfo',
    method:'get'
  })
}
//这里设置请求api-post
export function requestUserData(params){
  return request({
    url:'/userInfo',
    method:'post',
    data:params
  })
}
//index.js
import * as user from './api.js'
export{ user }

3. 再需要使用的页面引入

//index.vue
import * as API form '@/api/index.js'
API.user.requestUserData(params).then(res => {
    if (res.status === 200) {
       var data = res.data.data;
       if (data) {
          //获取data
        }
    }
}).catch(error => {
  console.log(error)
})

以上借鉴别人的封装，可能有不足，有错误希望指正