axios常用api详解

安装：npm install axios

import axios from 'axios'
Vue.prototype.$axios = axios // 将axios挂载在vue原型链上

 发送get请求

// 第一种方式
this.$axios.get(
    // 也可直接拼接http://localhost:8081/soft/sts/softs?pageIndex=1&pageSize=10
    'http://localhost:8081/soft/sts/softs', 
    {
        params: {
            pageIndex: 1,
            pageSize: 10
        }
    }
)
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    })

=====================
// 第二种方式
this.$axios({
    url: 'http://localhost:8081/soft/sts/softs',
    params: {
        pageIndex: 1,
        pageSize: 10
    }
})
    .then(res => {
        console.log('第二种方式')
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    })

发送post请求

准备的数据

data () {
    return {
        schevent: {
            schType: '1',
            schTitle: '2121',
            beginTime: commonUtil.timeUtils(0, new Date().getDate(), true, 0, 0, 0),
            endTime: commonUtil.timeUtils(0, new Date().getDate(), true, 0, 0, 0),
            schDesc: '121',
            schId: '3123',
        }
    }
},

方式一

this.$axios.post(
    'http://localhost:8081/soft/sche/upEvent',
    this.schevent, // 不需要对 this.schevent转json
    {
        headers: {'Content-Type': 'application/json;charset=utf-8'}
    }
)
    .then(res => {
        console.log(res)
    })

方式二

this.$axios.post(
    'http://localhost:8081/soft/sts/softs',
    'pageIndex=1&pageSize=10', {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }
)
    .then(res => {
        console.log(res)
    })

方式三

this.$axios({
    method: 'post',
    url: 'http://localhost:8081/soft/sts/softs',
    data: 'pageIndex=1&pageSize=10',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    })

执行多个并发请求

axios中的all()方法，传入一个数组，数组元素即为函数调用，函数中即为请求调用。然后，then()回调方法中调用axios自己的spread()方法。

test1 () {
    return ajax({
        url: '/sts/softs',
        contentType: 'application/x-www-form-urlencoded',
        method: 'post',
        params: {
            pageIndex: 1,
            pageSize: 10
        },
        data: 'pageIndex=1&pageSize=10'
    }).then(
        res => {
            return res
        },
        err => {
            console.log(err)
        }
    )
},
test () {
    return ajax({
        // sourceAxios: instanceTwo,
        url: '/common/sqlStr',
        cancelBefore: false,
        params: {sql: 'select * from software_downloadinfo'
    }).then(
        res => {
            return res
        },
        err => {
            console.log(err)
        }
    )
},

test4 () {
    this.$axios.all([this.test1(), this.test()])
        .then(this.$axios.spread(function (oneData, twoData) {
            console.log(oneData)
            console.log(twoData)
        }))
},

创建实例

// 创建一个axios实例 ==> instanceOne
const instanceOne = axios.create()
instanceOne.defaults.baseURL = 'http://localhost:8081/soft' // 实例的instanceOne baseurl

 配置项

// 创建另一个axios实例 ==> instanceTwo
const instanceTwo = axios.create({ // instanceTwo实例的默认配置项
    baseURL: 'http://localhost:8328/soft', //baseURL会放到url前面
    timeout: 10000, // 指定请求超时的毫秒数(0 表示无超时时间),超过 timeout 的时间，请求将被中断
    withCredentials: true, // 设置cross跨域 并设置访问权限 允许跨域携带cookie信息,跨域请求时是否需要使用凭证
    headers: {'Content-Type': 'application/json;charset=utf-8'}, // 请求头
    params: {},  // 无论请求为何种类型，在params中的属性都会以key=value的格式在urlzhong拼接
    transformRequest: [function (data) {
        // 允许在向服务器发送前，修改请求数据
        // 只适用于 POST,PUT,PATCH，
        return data;
    }],

    transformResponse: [function (data) {
        // 这里提前处理返回的数据
        // 在传递给 then/catch 前，允许修改响应数据
        return data;
    }],
    responseType: 'json', // 表示服务器响应的数据类型，可以是 'json'(默认), 'arraybuffer', 'blob', 'document', 'text', 'stream'
    validateStatus: function (status) {
        // validateStatus 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。
        // 如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve;
        // 否则，promise 将被 rejecte
        return status >= 200 && status < 300 // 默认的
    },
    // `cancelToken` 指定一个取消令牌，可以用来取消请求
    // cancelToken: new CancelToken(function (cancel) {
    // })
})

请求拦截器

axios.interceptors.request.use(
    config => {
        console.log('请求拦截器执行')
        return config
    }, err => {
        return Promise.reject(err)
    }
)

响应拦截器

axios.interceptors.response.use(
    response => {
        console.log('响应拦截器执行')
        return response
    }, (err) => {
        console.log('响应拦截器执行fail')
        iView.LoadingBar.finish()
        return Promise.reject(err)
    }
)