一 axios是什么

上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊

  1. 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
  2. jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架

Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

二 Axios请求方式

1、axios可以请求的方法：

get：获取数据，请求指定的信息，返回实体对象
post：向指定资源提交数据（例如表单提交或文件上传）
put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
delete：请求服务器删除指定的数据
总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；

2、get请求

示例代码
此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            axios.get('接口地址', {
                params: {
                    id: 12,//请求参数
                },
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'get',//请求方法
                params: {
                    id: 12,//请求参数
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

3、post请求

post请求一般分为两种类型

  1. form-data（常用于表单提交（图片上传、文件上传））

  2. application/json 一般是用于 ajax 异步请求

示例代码

form-data请求方式代码如下
注意：请求地址Request URL: http://localhost:8080/data.json，
请求头中Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydgohzXGsZdFwS16Y
参数形式：id:12

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            let formData = new formData()
            for(let key in data){
                fromData.append(key,data[key])
            }
            axios.post('接口地址', fromData}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: fromData,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

applicition/json请求方式代码如下
注意：请求地址Request URL: http://localhost:8080/data.json，
请求头中Content-Type: application/json;charset=UTF-8
参数形式：{id:12}

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data={
                id:12
            }
            axios.post('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

4、put和patch请求

示例代码
put请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.put('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'put',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

patch请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.patch('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

5、delete请求

示例代码
参数以明文形式提交=>params
注意：params方式会将请求参数拼接在URL上面，Request URL: http://localhost:8080/data.json?id=12
参数形式：id:12
Content-Type: text/html; charset=utf-8

axios
  .delete("/data.json", {
    params: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let params = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  params:params
}).then(res=>{
  console.log(res)
})

参数以封装对象的形式提交=>data
data方式不会讲参数拼接，是直接放置在请求体中的，Request URL:http://localhost:8080/data.json
参数形式：{id:12}
Content-Type: application/json;charset=UTF-8

//方法二
axios
  .delete("/data.json", {
    data: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let data = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  data:data
}).then(res=>{
  console.log(res)
})

6、并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。

在例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：
示例代码

// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
  axios.spread((dataRes, cityRes) => {
    console.log(dataRes, cityRes);
  })
);

三 Axios实例

1、创建axios实例

示例代码

let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})

可以同时创建多个axios实例。
axios实例常用配置：

  • baseURL 请求的域名，基本地址，类型：String
  • timeout 请求超时时长，单位ms，类型：Number
  • url 请求路径，类型：String
  • method 请求方法，类型：String
  • headers 设置请求头，类型：Object
  • params 请求参数，将参数拼接在URL上，类型：Object
  • data 请求参数，将参数放到请求体中，类型：Object

2、axios全局配置

示例代码

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

3、axios实例配置

示例代码

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

4、axios请求配置

示例代码

this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()

以上配置的优先级为：请求配置 > 实例配置 > 全局配置

四、拦截器

拦截器：在请求或响应被处理前拦截它们

1、请求拦截器

示例代码

    //   请求拦截器
    axios.interceptors.request.use(config => {
      // 在发送请求前做些什么
      return config;
    }, err=>{
        // 在请求错误的时候的逻辑处理
        return Promise.reject(err)
    });

2、响应拦截器

示例代码

    // 响应拦截器
    axios.interceptors.response.use(res => {
      // 在请求成功后的数据处理
      return res;
    }, err=>{
        // 在响应错误的时候的逻辑处理
        return Promise.reject(err)
    });

3、取消拦截

示例代码

	let inter = axios.interceptors.request.use(config=>{
        config.header={
            auth:true
        }
        return config
    })
    axios.interceptors.request.eject(inter)
# ajax # 前端 # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

2024华为开发者盛典，海外开发者代表团走进华为

avatar 华为开发者空间
cover

华为“行业AI应用创新孵化营”走进中国医科大学，共探人才培养新模式

avatar 华为开发者空间
cover

拦截烂SQL，解读GaussDB(DWS)查询过滤器过滤规则原理

avatar 华为开发者空间