第4章 axios

1.安装axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

在编译器的的终端控制台上输入

npm install axios --save

或

cnpm install axios --save

或者通过CDN直接在文件中引入

2.使用axios请求数据

在脚手架项目中的main.js中头部引入axios

import axios from 'axios'

并将其注册为全局变量

Vue.prototype.$axios = axios

在需要使用的场合通过GET和POST方式请求数据

this.$axios.get('url')
.then((res) => {
    console.log(res.data);
})
.catch((err) => {
    console.log(err);
})

this.$axios.post('url')
.then((res) => {
    console.log(res.data);
})
.catch((err) => {
    console.log(err);
})

3.跨域请求

如果请求的数据来自其他服务器，需要跨域请求，需要声明代理来解决问题
vue脚手架3.0版本取消了config文件夹，需要自己在工程根目录新建vue.config.js来进行配置
vue.config.js在编译时会被脚手架自动加载
如果是element-ui项目，在webpack.config.js文件中的devServer模块中添加，方式与下面的操作一致
声明vue.config.js
在其中配置根节点

module.exports = {
}

在根节点中追加代理设置

devServer: {
        proxy: {
            'abc': {
                target: 'url',  //第一个跨域网站根路径
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/abc": "/" // 这里理解成用‘/abc’代替target里面的地址，后面组件中我们掉接口时直接用abc代替
                }
            },
            'xyz'{
                target: 'url',  //第二个跨域网站根路径
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/abc": "/" // 这里理解成用‘/abc’代替target里面的地址，后面组件中我们掉接口时直接用abc代替
                }
            }
        }
    }