导航守卫和axios

需要先下载axios，输入命令：npm install -g @vue/cli

1. 它有5个method：get，post，put，patch，delete。
   其中get：是获取接口中的数据，
   post：提交数据（表单提交和文件上传）
   put：更新数据（把所有数据推送到后端）
   patch：更新数据（只将修改的数据推送到后端）
   delete（删除数据）

接着说一下axios如何使用，在created（）方法中写入获取的过程

 import axios from 'axios'
 created() {
            // get方法
            axios.get('/data.json', {
                params: {
                    id: 12
                }
            }).then((res) => {
                console.log(res)
            })
            axios({
                method: 'get',
                url: '/data.json',
                params: {
                    id: 12
                }
            }).then(res => {
                console.log(res)
            })


			let data = {
                id: 12
            }
            //post方法一
            axios.post('/post', data).then(res => {
                console.log(res)
            })
            //post方法二
            axios({
                method: 'post',
                url: '/post',
                data: data
            }).then(res => {
                console.log(res)
            })
            // form-data请求
            let formData = new FormData()
            for (let key in data) {
                formData.append(key, data[key])
            }
            axios.post('/post', formData).then(
                res => {
                    console.log(res)
                }
            )



			// put请求更新（所有数据都推送到后端）
            axios.put('/put', data).then(res => {
                console.log(res)
            })
            //patch请求更新(只将更改的数据传给后端)
            axios.patch('/patch', data).then(res => {
                console.log(res)
            })

            //delete删除请求
            axios.delete('/delete', {
                params: {
                    id: 12
                }
            }).then(res => {
                console.log(res)
            })
            axios.delete('/delete', {
                data: {
                    id: 12
                }
            }).then(res => {
                console.log(res)
            })
            axios({
                method: 'delete',
                url: '/delete',
                params: {},
                data: {}
            }).then(res => {
                console.log(res)
            })

通常都是axios后接用到的method，在括号里面写入url和对象，然后在then里写成功输出的结果和在catch里失败输出的结果（catch也可以不写）。
2. 并发请求
要求是能进行多个请求，并统一返回处理值。

axios.all(
                [
                    axios.get('/data.json'),
                    axios.get('/city.json')
                ]
            ).then(
                axios.spread((dataRes, cityRes) => {
                    console.log(dataRes, cityRes)
                })
            )

两个json文件是自己创建的，只是存储简单的数据。axios使用all方法，把两个get请求分别放在一个数组中，成功后then使用spread方法将两个返回值写入，分开，可以在后面做一些逻辑处理或者只是简单的输出。

3. 多个地址及时间不同

created() {
            let instance = axios.create({
                baseURL: 'http://localhost:8080', timeout: 1000
            })
            let axios2 = axios.create({
                baseURL: 'http://localhost:9090', timeout: 5000
            })
            instance.get('/data.json').then(res => {
                console.log(res)
            })
            axios2.get('/data.json').then(res => {
                console.log(res)
            })
        }

如果地址有两个，先分开处理baseURL和timeout，在分别输出即可。
4. axios的配置参数

 created() {
            axios.create({
                baseURL: 'http://localhost:8080',//请求的域名,基本地址
                timeout: 1000,//请求超时时长(ms)
                url: '/data.json',//请求路径
                method: 'get,post,put,patch,delete',//请求方法
                headers: {
                    token: ''
                },//请求头
                params: {},//请求参数拼接在url上
                data: {},//请求参数放在请求体
            })

            // 1.axios全局配置(底)
            axios.defaults.timeout = 1000
            axios.defaults.baseURL = 'http://localhost:8080'
            // 2.axios实例配置（中）
            let instance = axios.create()
            instance.defaults.timeout = 3000
            // 3.axios请求配置（高）
            instance.get('/data.json', {
                timeout: 5000
            })

            //实际开发
            //有两种接口
            //http:localhost:9090
            //http:localhost:9091
            let instance2 = axios.create({
                baseURL: 'http:localhost:9090',
                timeout: 1000
            })
            let instance1 = axios.create({
                baseURL: 'http:localhost:9091',
                timeout: 3000
            })
            // baseUrl,timeout,url,method,params
            instance2.get('/contactList', {
                params: {}
            }).then((res) => {
                console.log(res)
            })
            instance1.get('/orderList', {
                timeout: 5000
            }).then(res => {
                console.log(res)
            })
        }

5. 拦截器（重点）

//请求拦截器
            axios.interceptors.request.use(config => {
                //在发送请求前做些什么
                return config
            }, err => {
                // 在请求错误的时候做些什么
                return Promise.reject(err)
            })
            //响应拦截器
            axios.interceptors.response.use(res => {
                //请求成功对响应数据做处理
                return res
            }, error => {
                //响应错误做些什么
                return Promise.reject(error)
            })
            //取消拦截器
            let interceptors = axios.interceptors.request.use(
                config => {
                    config.headers = {
                        auth: true
                    }
                    return config
                })
            axios.interceptors.request.eject(interceptors)
            //例子 登陆状态（token:''）
            let instance = axios.create({})
            instance.interceptors.request.use(
                config => {
                    config.headers.token = ''
                    return config
                })
            //不需要登陆的接口
            let newInstance = axios.create({})

            //移动端开发
            let instance_phone = axios.create({})
            instance_phone.interceptors.request.use(config => {
                $('#modal').show()
                return config
            })
            instance_phone.interceptors.response.use(res => {
                $('#modal').hide()
                return res
            })

拦截器的使用，axuis.ubterceotirs.resoibse.use 在请求前设置，在请求后设置。还可以取消拦截器，需要在headers中设置auth：true，并最后调用eject方法axios.interceptors.request.eject(interceptors)
拦截器还可以设置token，用来判断登没登陆，写入逻辑，若没登录可跳转到登录界面。至于移动端开发还不懂。

6. 错误的处理

 //例子： 实际开发过程中，一般添加统一错误处理
            let instance = axios.create({})
            instance.interceptors.request.use(
                config => {
                    return config
                }, err => {
                    //请求错误 一般http状态码以4开头，常见 401 超时 404 not
                    return Promise.reject(err)
                })
            instance.interceptors.response.use(
                res =>{
                    return res
                },err =>{
                    //响应错误处理 一般http状态码以5开头
                    return Promise.reject(err)
                }
            )

7. 取消正在进行的http请求（了解）

created() {
            let source = axios.CancelToken.source()
            axios.get('/data.json', {
                cancelToken: source.token
            }).then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
            })

            // 取消请求(message可选)
            source.cancel('cancel http')

            // 什么情况可能用到取消请求
            // 商城 3-5秒
        }

需要用到CancelToken的source方法，在最后一步在调用下cancel方法，取消请求。