Vue (十二) --------- Vue 发送 ajax 请求

---

一、概述

• vue本身不支持发送AJAX 请求，需要使用 vue-resource (vue1.0版本)、axios(vue2.0版本)等插件实现

• axios 是一个基于 Promise 的 HTTP 请求客户端，用来发送请求，也是 vue2.0 官方推荐的，同时不再对 vue-resource 进行更新和维护

• 参考：GitHub 上搜索 axios，查看API文档

二、axios

1. 特性

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

2. 安装 axios

使用 CDN

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

或

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用 npm

npm install axios

使用 bower

bower install axios

使用 yarn

yarn add axios

3. 基本用法

安装完之后我们需要在 main.js 中进行引入

import axios from "axios"

与很多第三方模块不同的是，axios不能使用use方法，我们要把它加入到原型链中

Vue.prototype.$axios = axios;

常用方法

方法	说明
axios(config)	通用/最本质的发送任意类型的请求方式，config 请求对象，可以包含请求方式/请求路径/请求参数
axios.get(url,params)	get请求
axios.post(url,data)	向服务器添加数据
axios.put(url,data)	修改服务器中的数据
axios.delete(url,params)	删除服务器中的数据
axios.interceptors.request.use(config=>return config)	请求拦截器，一定要把请求对象config返回,可以在里面设置config的相关配置比如请求头的信息
axios.interceptors.response.use(res=>return res.data)	响应拦截器，可以对服务中的返回的数据做一定的处理返回
axios.defaults.xxx	请求的默认全局配置(baseURl/method/timeout)

4. 请求配置项

{
  // `url` 是用于请求的服务器 URL
  url: "/user",

  // `method` 是创建请求时使用的方法
  method: "get", // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: "https://some-domain.com/api/",

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 "PUT", "POST", 和 "PATCH"
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: "Fred"
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求花费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

  // `responseType` 表示服务器响应的数据类型，可以是 "arraybuffer", "blob", "document", "json",  "text", "stream"
  responseType: "json", // 默认的
  
  
  // "proxy" 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: "127.0.0.1",
    port: 9000,
    auth: : {
      username: "mikeymike",
      password: "rapunz3l"
    }
  }
}

5. 响应结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

响应成功进入到 then 方法，响应失败进入到 err 方法中。

6. 拦截器

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

7. 示例

this.$axios.get('/url',{
	params: {
	   id:1
	}
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
}

this.$axios.post('/url',{
	id:1
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

8. axios 跨域问题

因为 axios 中只能使用 get 和 post 方法来进行请求数据，没有提供 jsonp 等方法进行跨域访问数据。

方案一 ：配置代理服务器

既然使用axios直接进行跨域访问不可行，我们就需要配置代理了。代理可以解决的原因：因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据。

1.配置 BaseUrl

在 main.js 中，配置数据所在服务器的前缀(即固定部分)，代码如下：

axios.defaults.baseURL = '/api' 

作用是我们每次发送的请求都会带一个 /api 的前缀。

2. 配置代理

在 vue.config.js 文件中加入以下配置

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',// 你请求的第三方接口
				pathRewrite:{'^/api':''},/// 路径重写  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

当然也可以通过后端配置跨域问题的解决

三、 vue-resource

vue-resource 与 axios 语法上大同小异，但 vue-resource 中 jsonp 方法可以实现跨域请求，因此我们重点来看 jsonp 。

JSONP 是利用Javascript可以跨域的特性从服务端请求数据的，即在跨域的情况下才有必要使用 JSONP 来发送请求。

语法：

jsonp(url, [options])

示例：

<div id="app">
    请输入关键字：<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)">
    <ul>
        <li v-for="r in result">{{r}}</li>
    </ul>
</div>
<script>

window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      keyword: '',
      result: ''
    },
    methods: {
      sendJsonP(keyword) {
        let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
        this.$http.jsonp(url, {
          params: {
            wd: keyword
          },
          jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb，所以需要指定下                     }
        }).then(res => {
          if (res.data.g) {
            this.result = res.data.g.map(x => x['q']);
          } else {
            this.result = [];
          }
        });
      }
    }
  });
}
</script>