Vue.js axios

1.安装与引入

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，官方文档
• 在HTML文件中引入

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

• 在脚手架中使用

//安装axios
npm install axios -S
//引入
import axios from 'axios'

2.基本使用

• axios()方法接收一个对象，在对象中指定请求方式和提交参数

<script>
    //get请求参数
    var query = {q:'vue',sort:"stars"}
    //post请求参数
    var data = {}
    //token
    var token = "xvcxvcxvcxv"
    //发起请求
    axios({
        method:'get',//设置请求方法
        baseURL:'http://127.0.0.1:80', //将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
        url:'/test',//是用于请求的服务器 URL
        //params:query,//适用于get方法 相当于在url后面拼接 ?wd=js
        data:{},//post请求的数据
        headers:{ //即将被发送的自定义请求头
            'Authorization':token,  //为请求添加token
            'X-Requested-With': 'XMLHttpRequest', //Ajax 请求
        },
        timeout: 1000,//如果请求花费的时间了超过 `timeout` 的时间，请求将被中断,并触发catch
        responseType: 'json', // 默认json
    }).then(res => {
        //成功回调
        console.log(res)
    }).catch(err => {
        //失败回调
        console.log(err)
    })
</script>

• 常用的配置项

参数	说明
method	请求方式，默认get
url	请求地址
params	get请求的query参数，数据类型为对象类型
data	post请求的参数
baseURL	baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
headers	即将被发送的自定义请求头，例如token，数据类型为对象类型
timeout	指定请求超时的毫秒数，请求将被中断,并触发catch
responseType	期望服务器响应的数据类型，默认json(标准格式就应该是json，即使是其他格式，也应该封装到json内)

• 方法别名：将配置项中重要的3个参数(method,url,data)抽离出来，让代码更直观

axios.get(url[, config])
axios.post(url[, data[, config]])

3.响应结构

• axios请求的响应包含以下信息：

属性	说明
data	服务器提供的响应数据
status	HTTP 状态码 例如200
statusText	来自服务器响应的 HTTP 状态信息 例如 "OK"
headers	服务器响应的头
config	当前请求的配置信息

4.并发

• 使用axios.all([promiase,promiase2])发起并发请求，待所有请求都回来后统一处理

<script>
    new Vue({
        el:"#app",
        data: {

        },
        created(){
            //直接读取返回结果
            this.getAllData()
            //使用spread处理返回结果
            this.getAllData2()
        },
        methods: {
            getAllData(){
                //接收2个promise对象
                axios.all([this.getData(), this.getData2()])
                .then(function(resArr){
                    //返回结果放入数组中
                    console.log('res1',resArr[0].data)
                    console.log('res2',resArr[1].data)
                })
            },
            getAllData2(){
                //接收2个promise对象
                axios.all([this.getData(), this.getData2()])
                .then(axios.spread(function (res1, res2) {
                    // 两个请求现在都执行完成
                    console.log('res1', res1.data)
                    console.log('res2', res2.data)
                }))
            },
            getData(){
                //返回promise对象
                return axios.get('http://127.0.0.1:8086/getDouble?val=5')
            },
            getData2(){
                //返回promise对象
                return axios.get('http://127.0.0.1:8086/getTriple?val=10')
            }
        }
    })
</script>

5.配置默认值

• 给axios本身配置默认值

//入口文件
import Vue from 'vue'
import axios from 'axios'

//统一配置接口域名
axios.defaults.baseURL = 'https://api.example.com'
//统一添加token
axios.defaults.headers.common['Authorization'] = window.localStorage.getItem("token")
//其他
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 2500

• 给axios实例配置默认值

//创建实例
const instance = axios.create({
  //默认配置
  baseURL: 'https://api.example.com'
});

// 默认配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN
instance.defaults.timeout = 2500

//在vue中为了使所有的组件都能调用这个实例，可将其挂载到vue的原型链中
Vue.prototype.$ajax = instance

• 优先级：请求配置 > 实例配置 > 全局配置

6.拦截器

• 含义：在请求或响应被 then 或 catch 处理前拦截它们，一般用于处理公共逻辑，例如请求时统一添加token，请求失败时统一弹窗提示等等
• 可以给axios本身添加拦截器，还可以给axios实例添加拦截器
• 注意：在响应拦截器中，请求失败(404,401,跨域)将执行第二个回调

//入口文件
import Vue from 'vue'
import axios from 'axios'

// 请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers.common['Authorization'] = window.localStorage.getItem("token")
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    // 未登陆或者登陆过期，跳转登陆页面
    return Promise.reject(error);
  });