axios发送请求篇

vue发送请求使用 axios

vue发送请求在 ES5 中， 我们使用 vue-routerce 发送异步请求，

​ 但是在 ES6 中， 作者不再维护 vue - resource。建议我们使用 axios 发送请求。

​

• vue 家族插件 使用 vue.use 方法来安装。
• vue家族插件： vue, vuex, vue-router, vue-resource

2.1 使用axios

​

axios 的使用非常简单，就想 jQuery 一样。直接调用简便方法。

• get （url , config ） 发送 get 请求。

  • url ： 请求地址

  • config 表示配置项

    • parmas，headers 等

• post(url, data, config) 发送 post 请求

  • url 表示请求地址
  • data 表示携带的数据
  • config 表示配置项
    • parmas，headers 等

监听错误

​ axios实现了 promise 规范， 因此 then方法监听成功，catch方法监听失败。

• 通过 then 方法监听结果

  • 第一个参数表示成功时候的回调函数
    • 参数表示请求对象，其中 data 属性表示返回的数据
    • 当多次使用 then 方法的时候，前一个 then 方法的返回值，将作为后一个 then 方法的参数。
  • 第二个参数表示失败时候的回调函数

• 通过 catch 方法监听失败

注意点：

不论是 get 请求还是 post 请求，都可以携带 query 数据

query 数据可以在两个位置添加

• 在 url 上添加 query 数据
• 在 config 配置中的 params 属性中传递。
• axios 提交的数据，默认使用的是 json 格式。
• 我们可以通过修改 headers 中的 Content-Type 字段，来模拟表单提交。
  • 模拟表单： application/x-www-form-urlencoded

示例代码：

// 引入vue
import Vue from 'vue';
// 引入axios
import axios from 'axios';

// 安装
// Vue.prototype.$ickt = axios;
// 语义化
Vue.prototype.$http = axios;

// 组件类
let Home = Vue.extend({
    // 模板
    template: `
        

            
home page -- {{msg}}
        
    `,
    // 数据
    data() {
        return {
            msg: ''
        }
    },
    // 组件创建完
    created() {
        console.log('home', this)
        // 发送请求
        // axios.get('/data/demo.json?color=red', {
        //     params: {
        //         num: 10
        //     }
        // })
        
        this.$http.post('/data/demo.json?color=green', {
            msg: 'hello'
        }, {
            // query数据
            params: {
                num: 20
            },
            // 修改请求头
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            }
        })
            // 监听结果
            // .then(res => console.log('success', res))
            .then(({ data }) => {
                // 存储数据
                this.msg = data.title
            })
            // 多次订阅then方法
            // .then(res => {
            //     console.log(123, res)
            //     return { num: 100 }
            // })
            // .then(
            //     // 成功
            //     res => console.log('success', res),
            //     // 失败
            //     err => console.log('error', err)
            // )
            // 失败
            // .catch(err => console.log('error', err))
    }
})
// console.log(123123123)

// 创建应用
let app = new Vue({
    // 容器元素
    el: '#app',
    // 注册组件
    components: { Home },
    // 数据
    data: {},
    // 创建完
    created() {
        console.log('app', this)
    }
})