Axios的使用

Axios是一个基于Promise（ES6中用于处理异步的）的HTTP库，用于浏览器和node.js中。主要学习的就是如何封装使用和拦截器的使用

官网：http://www.axios-js.com/docs/

万能接口 http://jsonplaceholder.typicode.com/users

特点：

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

一、安装方式：

①npm 方式安装：npm i axios --save

②script方式引入:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

③yarn 方式安装:yarn add axios --save

二、配置方式

　　可以选择封装成文件的方式进行axios的封装，如果项目比较小，也可以选择在main.js中直接封装

       我以main.js文件的封装为例

import axios from 'axios'

//axios的配置
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',//每个接口都会访问的一截路径
  timeout: 1000,//响应超时时间
  headers: {'X-Requested-With': 'XMLHttpRequest'},//设置头部信息，一般遇到跨域的时候，需要后台设置，不需要前端配置
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }], 
　 // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
   //如果每隔接口都需要传一个相同的参数，可以写在这个里面
   params: {
     ID: 12345
   },　   
});

Vue.prototype.$http = axios

没有的可以不设置

Axios拦截器（难理解一些，写过一次就会了）

重点是axios中拦截器的用法，就是在每次发送或者响应请求时都会拦截一下，一般会用在前端处理用户登陆失效时的检验（一些情况下，后台会选择处理，如果后台处理的话，前端就需要根据后台返回的状态码控制路由跳转至登陆页面就好）

代码如下

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
     //在这里写需要处理的逻辑
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么 
    //在这里写需要处理的逻辑
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

这是需要在main.js或者自己额外拿出来的js中设置的代码

在真正vue组件中发送接收Ajax请求如果操作呢？

简易代码：（仅供参考）

this.$http.get('http://jsonplaceholder.typicode.com/users').then((response)=>{
    //输出值
   console.log(response,'接口返回的值')
}).catch((err)=>{
   console.log(err,'接口出错了')
})

//如果是不规定方法的写法
this.$http({
    url:'url',
   method:'post/put/patch/delete'
}).then((response)=>{
  console.log(response)
}).catch((err)=>{
  console.log(err)
})

在实际的项目中，一般都会将所有的接口进行封装一遍，然后直接在不同的Vue组件中引入不同的接口方法

接口封装的方式

import request from '@/utils/request'
//request是我在request文件中设置的axios的封装，也就是我文章上部分提到的在main.js中封装的代码
//get方式
① export function getData(query){
     return request({
         url:'/api/user/getname',
        method:'get',
       params:query
    })
}
② //使用解构的方式传值，{ip}相当于?ip=ip
export function getData(ip){
     return request({
         url:'/api/user/getname',
        method:'get',
       params:{ip}
    })
}
③//其他方式
export function getData(data){
     return request({
        url:'/api/user/getname',
        method:'post',
        data //建议使用data，我之前使用params报错因为data是你传给接口的整个的数据值
    })
}