axios

目录

一、axios简介

二、解构赋值

三、Axios的请求方式

四、axios二次封装

---

一、axios简介

axios 是一个专注于网络请求的库

调用axios得到的返回值是promise对象

axios({
            //请求方式
            method: '',
            // 请求地址
            url: '',
            // url中的查询参数
            params:{},
            // 请求体参数
            data:{}
        }).then((result) => {
            //.then用来指定请求成功后的回调函数
            //形参中的result是请求成功后的结果
        })

 

二、解构赋值

Axios 在请求在请求到数据之后会在真正的数据之外套一层壳

使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来

把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }

const { data: res } = await axios({
        })

如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！

await 只能用在被 async “修饰”的方法中

const { data } = await axios({
         })

三、Axios的请求方式

get请求

获取数据

 axios.get('url地址', {
         // GET 参数
         params: {}
       })

post请求

向指定资源提交数据（例如：表单提交或文件上传）

 axios.post('url', { /* POST 请求体数据 */ })
 ​
 ​
 //1、formData请求
 let data = {}
 let formData = new formData()
 for(let key in data){
     fromData.append(key,data[key])
 }
 axios.post('url', fromData}).then((res) => {
 }
                                   
 //2、applicition/json请求
 let data = {}
 axios.post('url', data}).then((res) => {
 }                                 
                                   

put请求

更新数据

 axios.put('url',{
 /* put 请求体数据 */
 })

patch请求

更新数据，用来对已知资源进行局部更新

 axios.patch('url',{
 /* patch 请求体数据 */
 })

delete请求

请求服务器删除指定的数据

 axios.delete('url地址', {
         // delete 参数
         params: {}
       })

四、axios二次封装

import axios from 'axios'
 ​
 const http = axios.create({
   // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
   // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
     baseURL:'',
     timeout:10000,
 ​
 })
 ​
 // 添加请求拦截器
 http.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });
 ​
 // 添加响应拦截器
 http.interceptors.response.use(function (response) {
     // 2xx 范围内的状态码都会触发该函数。
     // 对响应数据做点什么
     return response;
   }, function (error) {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
     return Promise.reject(error);
   });
 ​
 export default http