Vue-axios[promise][async/await]

一.vue axios前后端通信

1.基础

1. promise方法

GET

        axios.get('http://127.0.0.1/gh', {
            params: {
                id: 12345
            }
        }).then(function (v) {
            console.log(v)
        })

POST

# post默认提交的是json数据
        axios.post('http://127.0.0.1/gh', {
            id: 123,
            name: 'luck'
        }).then(function (v) {
            console.log(v)
        })

2. async/await
   GET

        async function go(){
            var oo = await axios.get('gh',{
                params: {
                id: 12345
            }
            })
            console.log(oo)
        }
        go()

POST

        async function bbc(){
            var oo = await axios.post('gh',{
                id:55,
                name:'jack'
            })
            console.log(oo)
        }
        bbc()

3. 应用：把调用后台api的函数写入到methods来调用，初始化用生命周期中挂载mounted来进行。

2.全局设置

2.1 地址

格式：axios.defaults.baseURL = 'http://localhost'

2.2 超时设置

解释：等待后台响应超过该事件即认为超时
格式：axios.defaults.timeout = 3000

2.3 设置请求头

格式：axios.defaults.headers['mytoken'] = 'gdg545dg4d51v5d5b1dbd='

3.拦截器

解释：比如可以通过url判断，发往A url的信息加上a请求头，发往B url的信息加上b请求头

3.1 请求拦截器

# config.url 会获取url地址
# config.headers.自定义头名称='自定义内容'
        axios.interceptors.request.use(function(config) {

            if(config.url == 'bbc'){
                config.headers.mytoken = 'nihao';
            }
            else{
                config.headers.mytoken = 'first';
            }
            
            return config;
            })

3.2 响应拦截器

解释：在服务器响应回来的数据会在这里被处理

# 这样写请求体函数中拿到的数据就是result，这里是直接从对象中读取到data值
            axios.interceptors.response.use(function(d) {
                result = d.data
                return result
            })