axios请求方法

男娘i 2022-12-23 07:30 133阅读 0赞

## axios中各种方法调用接口 ##

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中

可以提供以下服务:

1、从浏览器中创建XMLHttpRequests

2、从node.js创建http请求

3、支持PromiseAPI

4、拦截请求和响应

5、转换请求数据和响应数据

6、取消请求

7、自动转换JSON数据

8、客户端支持防御XSRF

> get：获取数据  
> post：提交数据（表单提交+文件上传）  
> put：更新数据（所有数据推送到后端）  
> patch：更新数据（只将修改的数据推送到后端）  
> delete：删除数据

#### get方法 ####

`1.`不带参数

> axios.get("/user")

`2.`带参数

axios.get("/user",{ 
    	params:{ 
    		id:10,
    		age:10
    	}
    }//请求的地址实际为 localhost:8080/user?id=10&age=10

> 注意这里是以对象的形式传参

简单的提一句所有的方法也可以这样写不过一般习惯于简写

axios({  methods: 'get', url: '/user' })//也就是直接axios({methods:请求方式，url:'路径'，params：{有就带没有就不带}})

#### post方法 ####

主要提交表单数据和上传文件

axios.post("/user",
    	params:{ 
    		id:id
    	}
    )

> 注意这里以键值对的方式提交`params`就是键名,此处的params也可以省略，直接填写后面要传入的参数

#### delete方法 ####

`1.`参数为普通的字符

axios.delete("/user",{ 
    	params:{ 
    		id:id
    	}
    })

`2.`参数为数组形式这里比较容易入坑

axios.delete("/user",{ 
    	data:arr
    })//其中arr=[1,2,3]的数组形式存在，键值必须是data

#### put方法 ####

和post方法一样

axios.put("/user", data);

总结：以上方法中，get方式和delete方法带参数时比较特殊；但最为特殊的时delete方法带的参数为数组形式时。

#### axios.all请求多个请求 ####

axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) { 
      }));

最下面来个常用格式

axios.get('/getUser?id=12345')
      .then(function (response) { 
        console.log(response)
        this.setState({ 
          // ...
        })
      })
      .catch(function (error) { 
        // handle error
        console.log(error);
      })
    axios.get('/getUser', { 
        params: {  // 这里的参数设置为URL参数（根据URL携带参数）
          id: 12345
        }
      })
      .then(function (response) { 
        console.log(response);
      })
      .catch(function (error) { 
        console.log(error);
      }) 
     
    async function getUser() { 
      try { 
        const response = await axios.get('/getUser?id=12345');
        console.log(response);
      } catch (error) { 
        console.error(error);
      }
    }

#### axios全局配置 ####

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';

#### axios的单一实例化配置 ####

const instance = axios.create({ 
      baseURL: 'https://api.example.com'
    });
    instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

#### axios拦截器的使用 ####

可以使用axios拦截器来在发送请求之前或在响应response之前（then方法）来拦截请求并进行自定义的设置，定义request和response拦截器示例如下

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);
      })

#### 删除拦截器的时候 ####

const myInterceptor = axios.interceptors.request.use(function () { /*...*/});
    axios.interceptors.request.eject(myInterceptor);