Vue学习笔记(十二) Vue Ajax

时间  2019-11-12
标签 vue 学习 笔记 十二 ajax 栏目 Ajax 繁體版
原文   原文链接

目录javascript

一、简介

在 Vue.js 中咱们可使用 Axios 完成 Ajax 请求，Axios 是一个基于 Promise 的 HTTP 库html

这篇文章的文字很少，基本都是代码，解释也都写在注释里面啦vue

有兴趣的朋友也能够直接去看看官方文档：http://www.axios-js.com/zh-cn/docs/java

二、安装

（1）CDNios

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

（2）NPMshell

> npm install axios

三、GET 请求

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ info }}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                info: null
            },
            mounted: function () {
                let _this = this;
                // GET 方法原型: axios.get(url[, config])
                // 能够在 URL 中添加参数
                axios
                    .get('http://www.httpbin.org/get?firstName=Steve&lastName=Jobs') 
                    .then(function (response) { _this.info = response.data; })
                    .catch(function (error) { console.log(error); });
            }
        })
    </script>
</body>

</html>

四、响应结构

当咱们发送请求后，接收到的响应（response）到底是个什么东西呢？下面让咱们来看一看npm

{
    // 服务器返回的数据
    // http://www.httpbin.org 是一个用于测试请求的网站，它所返回的数据就是咱们请求的信息
    data: {},

    // 状态码
    status: 200,

    // 状态码对应的状态信息
    statusText: "OK",

    // 响应头
    headers: {},

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

五、POST 请求

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ info }}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                info: null
            },
            mounted: function () {
                let _this = this;
                // POST 方法原型: axios.post(url[, data[, config]])
                // 能够经过 data 添加参数
                axios
                    .post('http://www.httpbin.org/post', {
                        firstName: 'Steve',
                        lastName: 'Jobs'
                    })
                    .then(function (response) { _this.info = response.data; })
                    .catch(function (error) { console.log(error); });
            }
        })
    </script>
</body>

</html>

五、请求配置

除了上面两种常见的用法，咱们还能够给 axios() 方法传入一个配置对象，里面包含用于请求的相关配置json

好比说，咱们能够用这种方法发送一个简单的 GET 请求：axios

axios({
    url: 'http://www.httpbin.org/get',
    method: 'get',
    params: {
        firstName: 'Steve',
        lastName: 'Jobs'
    }
})

一样的，咱们也能够用这种方法发送一个简单的 POST 请求：后端

axios({
    url: 'http://www.httpbin.org/post',
    method: 'post',
    data: {
        firstName: 'Steve',
        lastName: 'Jobs'
    }
})

此外，一些比较经常使用的配置项以下：

  • url：请求 URL，惟一的必填项
  • baseURL：自动加在 url 前，以便于 url 使用相对路径
  • method：请求方法，默认为 get
  • headers：请求头
  • params：请求参数
  • paramsSerializer：将 params 序列化
  • data：请求数据
  • transformRequest：在发送请求前容许修改请求数据
  • transformResponse：在接收响应前容许修改响应数据
  • timeout：指定超时时间
  • withCredentials：表示跨域请求时是否须要使用凭证，默认为 false
  • auth：表示使用 HTTP 基础验证并提供凭据
  • responseType：服务器响应的数据类型，默认为 json
  • maxContentLength：服务器响应内容的最大长度

咱们还能够为请求配置设置默认值：

// 例如，下面设置 baseURL 为 https://www.example.com
axios.defaults.baseURL = 'https://www.example.com'

六、拦截器

咱们 then() 或 catch() 以前拦截请求或响应，并对它们进行一些处理

// 添加请求拦截器
var RequestInterceptor = axios.interceptors.request.use(function (config) {
    // 对请求数据作点什么
    return config;
}, function (error) {
    // 对请求错误作点什么
    return Promise.reject(error);
});

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

若是想移除拦截器，也很简单

// 移除请求拦截器
axios.interceptors.request.eject(RequestInterceptor);

// 移除响应拦截器
axios.interceptors.response.eject(ResponseInterceptor);

七、并发请求

axios.all() 能够批量发送请求，而后等全部请求都返回结果时，才执行一个回调

axios.all([
    asyncMethodOne(),
    asyncMethodTwo()
])
.then(axios.spread(function (resOne, resTwo) {
    // 如今两个异步请求 asyncMethodOne 和 asyncMethodTwo 都已完成
    // resOne 和 resTwo 分别是两个请求返回的响应
}))

补充：最近在写 axios 的时候遇到 跨域问题，查了好久资料才最终解决，这里也写下来记录一下

问题是这样子的，就是我要在利用 @vue/cli 搭建的项目中使用 axios 请求第三方天气查询的接口

http://t.weather.sojson.com/api/weather/city/101280101（GET 请求，在浏览器打开能够直接看到返回结果）

而后，按照上面的套路，很容易就能写出下面的代码：

axios
    .get('http://t.weather.sojson.com/api/weather/city/101280101')
    .then(function(res) { console.log(res); })
    .catch(function(err) { console.log(err); })

但是，当咱们运行项目 npm run serve，打开浏览器控制台查看结果的时候竟然报错了，出错信息以下：

Access to XMLHttpRequest at 'http://t.weather.sojson.com/api/weather/city/101280101'

from origin 'http://localhost:8080' has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

后来在网上查了一下才知道，因为同源策略的限制，咱们是不能直接进行跨域请求的

所谓跨域请求，是指请求 URL 与当前页面 URL 的协议、域名、端口三者任意之一不一样

那要怎么解决呢？如下就是利用 @vue/cli 搭建的项目在开发环境下使用 axios 进行跨域请求的解决方案

  1. 在项目的根目录下新建 vue.config.js 配置文件，并在文件中添加配置代码
// vue.config.js
module.exports = {
    // 使用后端 API 服务器发送请求，这样能够避免跨域问题
    devServer: {
        proxy: {
            // 自定义标识符，当请求以 '/sojson' 开头才使用代理
            '/sojson': {
                // 目标主机的协议和域名
                target: 'http://t.weather.sojson.com', 
                ws: true,
                changeOrigin: true,
                // 路径重写，在发送请求时将 '^/sojson' 替换成 ''
                pathRewrite: {
                    '^/sojson': ''
                }
            }
        }
    }
}
  1. 使用 axios 发送请求，注意请求地址的变化
axios
    .get('/sojson/api/weather/city/101280101')
    .then(function(res) { console.log(res); })
    .catch(function(err) { console.log(err); })

// 此时，请求 URL 为 '/sojson/api/weather/city/101280101'
// 由于请求以 '/sojson' 开头，符合自定义标识符，因此使用代理
// 由于请求以 '/sojson' 开头，符合路径重写规则，因此将其替换为 ''
// 拼接上目标主机的协议和域名 'http://t.weather.sojson.com'
// 最终使用代理发送的请求为 'http://t.weather.sojson.com/api/weather/city/101280101'
  1. 最后从新启动项目 npm run serve（重要），就能够实现跨域请求啦

再补充：最近又遇到一个问题，就是 GET 请求没有问题，可是 POST 请求却得不到正确的数据

好比说，咱们经过 POST 请求有道翻译的接口：https://fanyi.youdao.com/translate

和上面同样，咱们仍是须要先解决跨域的问题，在 vue.config.js 文件写好配置就行

module.exports = {
    devServer: {
        proxy: {
            '/youdao': {
                target: 'https://fanyi.youdao.com', 
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/youdao': ''
                }
            }
        }
    }
}

而后，按照上面相似的写法使用 axios

axios({
    url: '/youdao/translate',
    method: 'POST',
    data: {
          'i': 'Hello', // 翻译的内容
          'doctype': 'json',
          'from': 'AUTO',
          'to': 'AUTO'
    }
}).then(function(res) {
    console.log(res);
}).catch(function(err) {
    console.log(err);
})

可是当运行项目时你会发现，咱们得不到正确的数据，这时候咱们只须要作一点小改动就好

import qs from 'qs'
let fromData = {
    'i': 'Hello',
    'doctype': 'json',
    'from': 'AUTO',
    'to': 'AUTO'
}
axios({
    url: '/youdao/translate',
    method: 'POST',
    // 设置请求头 content-type
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    // 将对象序列化为 URL 形式
    data: qs.stringify(fromData)
}).then(function(res) {
    console.log(res);
}).catch(function(err) {
    console.log(err);
})

【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程