【第4章】Vue使用Axios

---

前言

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。

Axios 使用简单,包尺寸小且提供了易于扩展的接口。

---

一、特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 超时处理
• 查询参数序列化支持嵌套项处理
• 自动将请求体序列化为：
  • JSON (application/json)
  • Multipart / FormData (multipart/form-data)
  • URL encoded form (application/x-www-form-urlencoded)
• 将 HTML Form 转换成 JSON 进行请求
• 自动转换JSON数据
• 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
• 为 node.js 设置带宽限制
• 兼容符合规范的 FormData 和 Blob（包括 node.js）
• 客户端支持防御XSRF

二、请求方式别名

为了方便起见，已经为所有支持的请求方法提供了别名。

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]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

三、使用

1. 引入库

这里我们使用CDN

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

2. GET请求

<script>
   axios.defaults.baseURL = 'http://localhost:8080';
    //用户登录
    axios.post('/user/login', {
        username: '武当山张三丰',
        password: '12345678', 
        nickname: '77'
    }).then(function (response) {
        console.log(response)
        axios.defaults.headers.common['Authorization'] = 'Bearer '+response.data.data;
    })
    .catch(function (error) {
        console.log(error);
    }).finally(function () {
        // 总是会执行
        getUserInfo();
    });

</script>

3. POST请求

//获取用户信息
function getUserInfo(){
    axios.post('/user/info').then(function (response) {
            console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    })
}

---

总结

回到顶部
官方网站