Vue之axios

基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用。

引入

1、npm

npm install axios --save-dev

axios是不能够像vuex和vue-router一样注入各个字组件中的。所以不能在main.js中，是无效的：

import axios from 'axios';new Vue ({    el: 'app',    axios});

只能在需要Http请求的组件中导入

import axios from 'axios';export default({    mounted () {        console.log(typeof(axios)); //function    }});

2、CDN

在main.js头部或者需要服务的组件中插入。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

这里只是示例，URL有效性并未验证，请自行寻找。

请求类型

1、GET

2、POST

3、PUT

put查询的时候是按照路由的方式来的，而axios的params参数是作为查询的参数，会拼接为notes/?id=12123的形式，put需求的是notes/id所以url要自己拼接。因此params参数只适用于GET,POST,HEAD

4、PATCH

5、DELETE

axios({    //删除的时候不加?id=    url: 'http://localhost:9090/notes/' + note.id,     method: 'DELETE'  })  .then((res) => {      console.log('删除成功');    }, (res) => {      console.log('删除失败');    })  .catch((res) => {      console.log('抛出错误');    });

6、HEAD

请求配置

{  // `url` 是用于请求的服务器URL  url: '/user',  // `method` 是在发出请求时使用的请求方法  method: 'get', // 默认  // `baseURL` 会作为 `url`的前缀， 除非 `url` 是绝对路径.   // 设置baseURL以传递相对url是很方便的。  // 对当前实例有效  baseURL: 'https://some-domain.com/api/',  // `transformRequest` 允许在发送到服务器之前对请求数据进行更改  // 这只适用于请求方法的“PUT”、“POST”和“PATCH”  // 数组中的最后一个函数必须返回一个字符串或一个ArrayBuffer  transformRequest: [function (data) {    // Do whatever you want to transform the data    return data;  }],  // `transformResponse` 允许在响应的数据被创建前对它进行更改  // 它将被传递到 then/catch  transformResponse: [function (data) {    // Do whatever you want to transform the data    return data;  }],  // `headers` 是要发送的自定义消息头  headers: {'X-Requested-With': 'XMLHttpRequest'},  // `params` 是要用请求发送的URL参数  //源码中拼接为？id=12345&  params: {    ID: 12345  },  // `paramsSerializer` 是一个可选的函数，用于序列化 `params`  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)  paramsSerializer: function(params) {    return Qs.stringify(params, {arrayFormat: 'brackets'})  },  // `data` 是作为请求体发送的数据  // 只适用于请求方法： 'PUT', 'POST', and 'PATCH'  // 当没有设置 `transformRequest` 时, 必须是一个字符串，ArrayBuffer或者一个哈希  data: {    firstName: 'Fred'  },  // `timeout` 指定请求超时前的毫秒数。  // 如果请求的时间超过超时，则请求将被中止。  timeout: 1000,  // `withCredentials` 表示是否跨站点访问控制请求  // 应该使用凭证来做  withCredentials: false, // default  // `adapter` 允许定制处理请求，使测试更容易。  // 调用 `resolve` 或者 `reject` ，提供一个有效的响应 supply  (见 [response docs](#response-api)).  adapter: function (resolve, reject, config) {    /* ... */  },  // `auth` 表示应该使用HTTP基本身份验证，并提供凭证。  // 这将设置一个授权标头，覆盖任何现有的  // `Authorization` 你已经使用 `headers`自定义了头部.  auth: {    username: 'janedoe',    password: 's00pers3cret'  }  // `responseType` 表示服务器将响应的数据类型  // 可选项有 'arraybuffer', 'blob', 'document', 'json', 'text'  responseType: 'json', // 默认      // `xsrfCookieName` 是用于xsrf标记的cookie的名称  xsrfCookieName: 'XSRF-TOKEN', // default  // `xsrfHeaderName` 是携带xsrf令牌值的http头的名称  xsrfHeaderName: 'X-XSRF-TOKEN', // default  // `progress` 允许处理'POST' 和 'PUT uploads'的上传进度事件  // 以及 'GET' 下载  progress: function(progressEvent) {    // Do whatever you want with the native progress event  }}

响应的数据结构

响应的数据包括下面的信息：

{  // `data` 是服务器提供的响应  data: {},  // `status` 是来自服务器响应的HTTP状态代码  status: 200,  // `statusText` 是来自服务器响应的HTTP状态消息  statusText: 'OK',  // `headers` 服务器响应的头  headers: {},  // `config` 是为axios提供的请求配置信息  config: {}}

二级标题

三级标题

四级标题

注：