前端学习-接口的调用（axios）

ゝ一纸荒年。 2023-03-01 05:34 14阅读 0赞

## 前端学习-接口的调用 ##

今天我们主要学习的是 通过异步的方式来进行axios的接口调用的学习

## **第一部分：axios的基础用法** ##

**- get和 delete请求传递参数**

*  通过传统的url 以 ? 的形式传递参数
 *  restful 形式传递参数
 *  通过params 形式传递参数

**- post 和 put 请求传递参数**  
\- 通过选项传递参数  
\- 通过 URLSearchParams 传递参数

--------------------

## 第一部分(1)：发送get请求的三种方式 ##

# 1. 发送get 请求 
    	axios.get('http://localhost:3000/adata').then(function(ret){  
          # 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面
          // 注意data属性是固定的用法，用于获取后台的实际数据
          // console.log(ret.data)
          console.log(ret)
        })
    	# 2. get 请求传递参数
        # 2.1 通过传统的url 以 ? 的形式传递参数
    	axios.get('http://localhost:3000/axios?id=123').then(function(ret){ 
          console.log(ret.data)
        })
        # 2.2 restful 形式传递参数 
        axios.get('http://localhost:3000/axios/123').then(function(ret){ 
          console.log(ret.data)
        })
    	# 2.3 通过params 形式传递参数 
        axios.get('http://localhost:3000/axios', { 
          params: { 
            id: 789
          }
        }).then(function(ret){ 
          console.log(ret.data)
        })

## 第一部分(2)：发送delete请求的三种方式(传参方式和get一样) ##

#3 axios delete 请求传参 传参的形式和 get 请求一样
        axios.delete('http://localhost:3000/axios', { 
          params: { 
            id: 111
          }
        }).then(function(ret){ 
          console.log(ret.data)
        })

--------------------

## 第二部分（1）：发送post请求的两种方式 ##

# 4 axios 的 post 请求
        # 4.1 通过选项传递参数
        axios.post('http://localhost:3000/axios', { 
          uname: 'lisi',
          pwd: 123
        }).then(function(ret){ 
          console.log(ret.data)
        })
    	# 4.2 通过 URLSearchParams 传递参数 
        var params = new URLSearchParams();
        params.append('uname', 'zhangsan');
        params.append('pwd', '111');
        axios.post('http://localhost:3000/axios', params).then(function(ret){ 
          console.log(ret.data)
        })

## 第二部分（1）：发送put请求的两种方式 ##

#5 axios put 请求传参 和 post 请求一样 
        axios.put('http://localhost:3000/axios/123', { 
          uname: 'lisi',
          pwd: 123
        }).then(function(ret){ 
          console.log(ret.data)
        })

## 第三部分：axios拦截器的作用 ##

*  **请求拦截器**
    
     *  请求拦截器的作用是在请求发送前进行一些操作
        
         *  例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
 *  **响应拦截器**
    
     *  响应拦截器的作用是在接收到响应后进行一些操作
        
         *  例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

# 1. 请求拦截器 
    	axios.interceptors.request.use(function(config) { 
          console.log(config.url)
          # 1.1 任何请求都会经过这一步 在发送请求之前做些什么 
          config.headers.mytoken = 'nihao';
          # 1.2 这里一定要return 否则配置不成功 
          return config;
        }, function(err){ 
           #1.3 对请求错误做点什么 
          console.log(err)
        })
    	#2. 响应拦截器 
        axios.interceptors.response.use(function(res) { 
          #2.1 在接收响应做些什么 
          var data = res.data;
          return data;
        }, function(err){ 
          #2.2 对响应错误做点什么 
          console.log(err)
        })

--------------------

## 第四部分：async/await的作用 ##

*  async作为一个关键字放到函数前面
    
     *  任何一个`async`函数都会隐式返回一个`promise`
 *  `await`关键字只能在使用`async`定义的函数中使用
    
     *   await后面可以直接跟一个 Promise实例对象
     *   await函数不能单独使用

**async/await 让异步代码看起来、表现起来更像同步代码**

# 1. async 基础用法
        # 1.1 async作为一个关键字放到函数前面
    	async function queryData() { 
          # 1.2 await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象
          var ret = await new Promise(function(resolve, reject){ 
            setTimeout(function(){ 
              resolve('nihao')
            },1000);
          })
          // console.log(ret.data)
          return ret;
        }
    	# 1.3 任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
        queryData().then(function(data){ 
          console.log(data)
        })
    
    	#2. async 函数处理多个异步函数
        axios.defaults.baseURL = 'http://localhost:3000';
    
        async function queryData() { 
          # 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码 
          
          var info = await axios.get('async1');
          #2.2 让异步代码看起来、表现起来更像同步代码
          var ret = await axios.get('async2?info=' + info.data);
          return ret.data;
        }
    
        queryData().then(function(data){ 
          console.log(data)
        })