Vue中Axios的使用（学习笔记）

最新推荐文章于 2025-06-10 17:10:24 发布

Gray_Song

最新推荐文章于 2025-06-10 17:10:24 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： Axios

本文链接：https://blog.youkuaiyun.com/qq_38702877/article/details/99622174

Axios 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成Axios库进行HTTP请求，包括安装、配置、全局设置及拦截器的使用，覆盖了GET、POST等多种请求方法。

1.安装

在Vue-cli的目录下

cnpm install axios --save

2.引入

在main.js中

import Axios from 'axios'
Vue.prototype.$axios = Axios;//加载到原型上

注意大小写

3.使用

在组建中创建生命周期函数

	created(){
		this.$Axios.get("")
		.then(res =>{})//返回数据处理
		.catch(error =>{})//返回数据为null时
	}

例：

有参数的情况：

get：

post（只看格式）：

post需要form-data格式（区别于）x-www-form-rulencoded格式

4.全局设置：

全局的 axios 默认值（放在main.js中，注意大小写）

Axios.defaults.baseURL = 'https://api.example.com';
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//作者的认证
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5.拦截器

在请求或响应被 then 或 catch 处理前拦截它们。（在main.js中全局）

// 添加请求拦截器
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);
  });

例：在请求post前转换格式

if(config.methods == "post"){
	config.data =  qs.stringifty(config.data);
}

post请求就可改为：

this.$axios.post("/searchMusic", {
    name: "稻香"
  })

6.HTTP协议中请求的8种方法:

OPTIONS获取服务器支持的HTTP请求方法；
HEAD跟get很像，但是不返回响应体信息，用于检查对象是否存在，并获取包含在响应消息头中的信息。
GET向特定的资源发出请求，得到资源。
POST向指定资源提交数据进行处理的请求，用于添加新的内容。
PUT向指定资源位置上传其最新的内容，用于修改某个内容。
DELETE请求服务器删除请求的URI所标识的资源，用于删除。
TRACE回馈服务器收到的请求，用于远程诊断服务器。
CONNECT用于代理进行传输，如使用ssl

patch是对put的补充，用来对已知资源进行局部更新。（幂等）