VUE学习笔记--Axios

      Axios 是一个基于 Promise 的 HTTP 库，简洁、易用且高效的代码封装库。通俗的讲， 它是当下比较流行的一种 Ajax 框架，可以使用它发起 http 请求接口功能，它是基于 Promise 的，相比较 Ajax 的回掉函数能够更好的管理异步操作。
 
      Axios 的特点：
从浏览器中创建 XMLHttpRequests 
从 node.js 创建 http 请求  
支持 Promise API 
拦截请求和响应  
转换请求数据和响应数据 
 取消请求 
自动转换 JSON 数据  
客户端支持防御 XSRF

首先使用 NPM 来安装 axios 的依赖，命令如下：
npm install axios
如果要全局使用 axios 就需要在 main.js 中设置，然后在组件中通过 this 调用，代码如下：
import axios from 'axios' 
Vue.prototype.$axios = axios;//加载到原型上
我们完全可以通过调用axios的API，传递一个配置对象来发起请求：

发送 post 请求，参数写在 data 属性中，代码如下：
axios({ 
     url: 'http://rap2api.taobao.org/app/mock/121145/post', 
     method: 'post',
  data: { 
     name: '小月' 
     }}).then(res => { 
console.log('请求结果：', res);});

发送 get 请求，默认就是 get 请求，直接第一个参数写路径，第二个参数写配置对 象，参
数通过 params 属性设置，代码如下：
axios('http://rap2api.taobao.org/app/mock/121145/get', { 
    params: { 
      name: '小月' 
    }}).then(res => { 
   console.log('请求结果：', res);});

axios 为所有请求方式都提供了别名：
axios.request(config) axios.get(url, [config]) 
axios.delete(url, [config]) 
axios.head(url, [config]) 
axios.options(url, [config]) 
axios.post(url, [data], [config]) 
axios.put(url, [data], [config]) 
axios.patch(url, [data], [config])

注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

JSON-Server 的安装及使用

       JSON-Server 是一个 Node 模块，运行 Express 服务器，我们可以指定一个 json 文件 作为 API 的数据源。简单理解为在本地创建了数据接口，使用 axios 来访问数据，使用步骤如下：
（1）首先 cmd 进入终端，在根目录下全局安装 json-server，命令如下：
npm install -g json-server
（2）在任意盘符中创建一个文件夹用于存放 json 数据文件，终端切换到该文件目录下， 执行初始化命令(一直回车即可)：
npm init
（3）在初始化的项目中安装 json-server，执行如下命令：
npm install json-server --save

（4）我们在项目文件夹下就会看到一个 package.json 文件，然后在当前目录下新建一个（ 如：db.json） 文件，在本文件下编写自己的 json 数据 。

（5）修改 package.json 数据，设置快捷启动 json-server 命令如下：
{ 
"name": "jsondemo", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"scripts": { 
          "json:server": "json-server --watch db.json" 
},
"author": "", 
"license": "ISC", 
   "dependencies": { 
        "json-server": "^0.16.1" 
} 
}

接着我们利用 axios 访问 json-server 服务器中的数据，对数据列表进行增删查操作

跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器 对 JavaScript 实施的安全限制。 
      同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。 
      如我们调用百度音乐的接口，来获取音乐数据列表，这必然会出现跨域问题，因为调用的并不是本地数据接口。百度音乐 的接口完整网址：
http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&siz e=10&offset=0

 在 Vue 中使用本地代理的方式进行跨域处理。首先在配置文件 config/index.js 里设置代理，在 proxyTable 中添加如下代码：
//config/index.js 部分代码省略 
module.exports = { 
    dev: { 
         proxyTable: { 
         '/api': { 
         //目标路径，别忘了加 http 和端口号 
           target: 'http://tingapi.ting.baidu.com', 
           changeOrigin: true, //是否跨域 true 为跨域 
           pathRewrite: { 
           '^/api': '' //重写路径
            } 
        }
    } 
}};

     在 main.js 中，配置访问的 Url 前缀，这样每次发送请求时都会在 url 前自动添加/api 的路径，代码如下：
//全局设置基本路径 /api 代表 http://tingapi.ting.baidu.com 路径 
axios.defaults.baseURL = '/api'