Vue使用axios二次封装、解决跨域问题

 1、什么是 axios

在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后，官方推荐使用 axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。

关于 promise 的详细介绍，请点击浏览文章：《ECMAScript6语法：Promise》

axios 的主要特点如下：

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

官方文档：《Axios中文文档》

2、安装 axios

如果在项目中使用 axios，则可以使用 npm 方式进行安装。在命令提示符窗口中输入如下命令：

npm install axios --save

或者使用 yarn 安装，命令如下：

yarn add axios –save

3、axios 的语法

在实际项目开发中，前端页面中所需的数据通常要从服务器端获取，这就需要实现本地与服务器端的通信，Vue 使用 axios 实现 Ajax 请求。

语法格式和参数说明：

axios({
    url: '',             //请求的路径
    method: 'GET',       //请求的方式，默认为GET
    params: {},          //传递的参数：一般用于GET请求方式，如：params: { userId : 1, userName: 'pan_junbiao的博客'} 
    data: {},            //传递的参数：一般用于POST请求方式，传递的是个对象，如：data: 对象, 
    headers: {},         //自定义请求头
    timeout: 1000,       //请求超时时间（毫秒）
    responseType: 'JSON' //响应的数据类型，默认为JSON
}).then(
    // then() 函数：处理请求成功的回调函数
    function (response) {
        console.log("返回的数据", response.data);
    }
).catch(function (error) {
    // catch() 函数：处理请求失败的回调函数
    console.log("发生异常：" + error.message);
});

axios 详细使用方法，请点击浏览文章：《Vu