关于axios:vue全家桶之aixos详解

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

从浏览器中创立 XMLHttpRequests
从 node.js 创立 https 申请
反对 Promise API
拦挡申请数据和响应数据
勾销申请
主动转换 JSON 数据
客户端反对进攻 XSRF

$ npm install axios

$ bower install axios

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

//4. 响应的 json 数据主动解析为 js 的对象 / 数组
        function axios({
            url,
            method='GET',
            params={},
            data={}}) {
            // 返回一个 Promise 对象
            return new Promise((resolve,reject) => {// 解决 method(转大写)
                method = method.toUpperCase()

                // 解决 query 参数(拼接到 url 上)  id=1&xxx=abc
                /* 
                    {
                        id: 1,
                        xxx: 'abc'
                    }
                */
                let queryString = ''
                Object.keys(params).forEach(key => {queryString += `${key}=${params[key]}&`
                })  
                if (queryString) {
                    // 去除最初的 &
                    queryString =  queryString.substring(0,queryString.length-1)
                    // 接到 url
                    url += '?' + queryString
                }   
                //1. 执行异步 ajax 申请
                // 创立 xhr 对象
                const request = new XMLHttpRequest()
                // 关上连贯(初始化申请, 没有申请)
                request.open(method, url, true)
                // 发送申请
                if (method === 'GET' || method === 'DELETE') {request.send()    // 异步的
                }else if(method==='POST' || method === 'PUT'){request.setRequestHeader('Content-Type','application/json;charset=utf-8')// 通知服务器申请体的格局是
                    request.send(JSON.stringify(data)) // 发送 json 格局的申请参数
                }

                // 绑定状态的监听
                request.onreadystatechange = function () {
                    // 发送申请是异步的, 绑定状态的监听为同步因而该函数放哪后面和前面都能够
                    if (request.readyState !== 4) {return}
                    // 如果响应状态码在 [200,300] 之间代表胜利, 否则失败
                       //es6 解构赋值
                    const {status, statusText} = request
                    // 如果申请胜利了, 调用 resolve()  
                    if (status>=200 && status<=299) {
                        // 筹备后果数据对象 response
                        const response = {data:JSON.parse(request.response), // 响应体解析好的数据
                            status, // 响应体的状态码
                            statusText  // 响应体对应的文本 
                        }
                        resolve(response)
                    }else{// 如果申请失败了, 调用 reject()
                        reject(new Error('request error status is' + status))
                    }

                    
                }
               

            })
        }

在文档中具备三个罕用的全局 axios 默认值：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 传入 token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 在发送前编码所有字符, 此设置是默认设置。

咱们罕用的设置是 axios.defaults.baseURL, 用于定义 url 地址，使得咱们在参数传递时，只传递参数对应参数即可。例:

// 指定默认配置
        axios.defaults.baseURL = 'http://localhost:3000'
        /* 1.GET 申请：从服务器端获取数据 */
        function testGet(){
            axios({
                    url:'/posts',
                    params:{id:1}
                }).then(response => {console.log('/posts get',response.data)
                })
        }   
        /* 2.POST 申请：向服务端去存储数据 */
        function testPost() {   
            axios({
                url:'/posts',
                method:'post',
                data:{title: "json-server4", author: "typicode4"}
            }).then(response => {console.log('/posts post',response.data)
                })    
        }
        /* 3.PUT 申请：更新服务器曾经数据 */
        function testPut() {
            axios({
                url:'/posts/4',
                method:'put',
                data:{title: "json-server5", author: "typicode5"}
            }).then(response => {console.log('/posts put',response.data)
                })
                
        }
        /* 4.DELETE 申请：删除服务器端的数据 */
        function testDelete() {
            axios({
                url:'/posts/4',
                method:'delete',
            })
                .then(response => {console.log('/posts delete',response.data)
                })
        }

咱们为什么要设计自定义实例？

应接需要：我的项目中由局部接口须要的配置由另一部分须要的配置不一样
解决办法：创立 2 个新的 axios 实例，每个都有本人特有的配置，能够利用于不同要求的申请接口中。

        const instance = axios.create({baseURL : 'http://localhost:4000'})
        // 应用 instance 发申请
        instance({url:'/xxx'   // 申请 4000})
        instance.get('/xxx')
    
        // 创立第二个实例，用于更改不同的配置
        const instance2 = axios.create({baseURL:'htto://localhost:8081'})
        instance2({url:'/yyy'})
        instance2.get('/yyy')

        // 增加申请拦截器(回调函数)
        axios.interceptors.request.use(
            config => {
            // 在发送申请申请之前会执行下列如下
                console.log('request interceptor1 onResolved()')
                return config
            },
            error =>{
            // 在发送申请失败会执行下列如下
                console.log('request interceptor1 onRejected()')
                return Promise.reject(error)
            }
        )
      // 增加响应函数
        axios.interceptors.response.use(
            response => {
            // 在响应数据胜利后会执行如下
                console.log('response interceptor1 onResolved')
                return response
            },
            function(error){
            // 在响应数据失败后会执行如下
                console.log('response interceptor1 onRejected')
                return Promise.reject(error)
            }
        )
       // 发送申请
       axios.get('http://localhost:3000/posts')
           .then(response => {console.log('data',response.data)
           })
           .catch(error => {console.log('error',error.message)
           })

当咱们点击按钮进行发送申请的时候，如果此时申请正在发送中，而用户却不通晓，用户可能会反复点击按钮进行发送申请，此时咱们应用撤销申请，如果以后申请还正在响应，用户再次点击按钮则会勾销上次正在发送的申请，避免服务器接管多个申请，并屡次做出响应。
实例：

// 定义拦截器模块
         // 增加申请拦截器
        axios.interceptors.request.use((config) => {
            // 在筹备发申请前, 勾销未实现的申请, 使得反复点击时, 勾销上次发送的申请
            if (typeof cancel === 'function') {cancel('勾销申请')
            }
            // 给 config 增加一个 cancelToken 的配置
            config.cancelToken = new CancelToken(function executor(c) { //c 是用于勾销以后申请的函数
                // 保留勾销函数, 用于之后可能须要勾销以后的申请
                cancel = c;
            })
            return config
        })
        
        // 增加响应拦截器
        axios.interceptors.response.use(
            // 当响应胜利后，勾销在发送申请时增加的撤销函数
            response => {
                cancel = null
                return response
            }, 
            error => {if (axios.isCancel(error)) {console.log('申请勾销的谬误',error.message)
                    // 中断 Promise 链    下面要中断请求
                    return new Promise(() => {})
                }else{  // 申请出错了
                    cancel = null
                    // console.log('申请 1 失败了',error.message)
                    // 将谬误向下传递
                    // throw error   上面要将谬误向下传递
                    return Promise.reject(error)
                }
            }
        )
        // 引入 CancelToken 构造函数
        const CancelToken = axios.CancelToken;
        let cancel  // 用于保留申请的函数
        function getProduct1() {
            axios({url:'http://localhost:4000/products1',}).then(
                response => {console.log('申请 1 胜利了',response.data)
                },
                error => {// 只用于解决申请失败的状况, 勾销申请的谬误不必
                   console.log('申请 1 失败了',error.message)
                }   
            )
        }

         /* 撤销申请 */
        function cancelReq() {// alert('勾销申请')
            // 执行勾销申请的函数
            // 没有点过发送数据的按钮, 当点击过发送数据的按钮后 cancel 将会存储一个函数
            // 故须要在强制勾销申请时判断 cancel 是否是一个函数，如果是函数阐明还正在发送申请中
            if (typeof cancel === 'function') {cancel('强制勾销申请')
            } else{console.log('没有可勾销的申请')
            }
        }

以上为 axios 的总结啦，有帮忙的话就点个赞呗！

具体利用也能够到官网文档进行查看官网中文文档

关于axios:vue全家桶之aixos详解

Axios 是什么？

Axios 的特点

如何引入？

应用 npm 引入

应用 bower 引入

应用 cdn 引入

应用 xhr 封装 ajax 申请参数

指定默认配置

自定义实例默认值

申请拦截器

撤销申请

强制撤销申请