[TOC] #### 1. vue 中如何发送网络请求 ？ --- **选择一: XMLHttpRequest (XHR)** 这种方式配置和调用方式都非常混乱，编码也很复杂，所以真实开发中都不会使用 XHR 这种方式 **选择二: jQuery-Ajax** 如果项目中使用了的 jquery，那么我们一般都会使用 jquery 自带的 ajax 封装，也就是 $.ajax({}) 但是，要明确一点，在 vue 整个开发中都是不需要使用 jQuery 了，如果在 vue 中还要使用 $.ajax 则使用引入 jquery。jquery 的代码达到 1w+ 行，vue 代码才 1w+ 行，完全没有必要为了网络请求引用这个重量级框架 **选择三: axios** 在 Vue1.x 的时候，Vue 官方推出了 vue-resource，它的体积相对于 jquery 小了很多，在 Vue2.x 推出后，去掉了 vue-resource，并且 vue 作者尤雨溪推荐使用 axios #### 2. 在 vue 脚手架中使用 axios ---- axios 中文文档: <http://www.axios-js.com/zh-cn/docs> 安装 axios 包 ``` npm install axios ``` 在 main.js 中导入 axios ```javascript import axios from 'axios'; ``` #### 3. 请求配置 --- 当 url 不是一个绝对 URL 时，baseURL 才会自动加在 url 前面 | 序号 | 参数 | 描述 | | ------------| ------------ | ------------ | | 1 | url | 接口地址 | | 2 | baseURL | 接口根路径 | | 3 | method | 请求类型，不区分大小写 | | 4 | params | URL 查询对象 | | 5 | data | 请求体数据，存放 POST 数据的地方 | | 6 | headers | 请求头 | | 7 | timeout | 超时时间,单位: 毫秒,请求超过时间时请求将被中断 (0 代表 不超时)| 常用请求配置参数 ```javascript axios({ url: "/goods/getLists", method: "post", baseURL: "http://shop.cy", params: { id: 10 }, data: { name: 'liang' }, headers: { token: "abcdef" }, timeout: 5000 }) ``` #### 4. 配置默认值 --- **全局的 axios 默认值** ```javascript axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; ``` **自定义实例默认值** 当前接口地址是多个域名时，定义全局配置默认值显然是不合适的，因为接口前缀不同，此时可以定义多个 axios 实例 ```javascript // 创建 axios 实例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 500 }) // 发送网络请求 instance(config).then(res => { console.log('res', res) }) ``` #### 5. 网络请求模块封装 --- 创建文件: **src/network/request.js** ```javascript import axios from 'axios'; export default (config) => { // 创建 axios 实例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 1 }) // 响应拦截器 instance.interceptors.response.use(response => { // 响应成功 return response.data; // 返回接口数据 }, error => { // 响应错误 return Promise.reject(error); }); return instance(config) }; ``` 使用示例 ```javascript request({ url: '/test/req', params: { id: 200 } }).then(res => { console.log('res', res) }).catch(err => { console.log('err', err) }) ```