vue 菜菜芥籽学习笔记 ---02

网络请求全局封装

1. 安装请求接口插件

npm i axios

2. utils目录下封装 (request.js)

import axios from "axios"
​
// 创建实例
 const instance = axios.create({
     // 网络请求的基础地址。。设置基础地址后 发送请求时可以省略
     baseURL:"http://localhost:1337"
 });
​
 // 封装get 请求 。axios get请求,参数为路径与配置信息
 export const get =(url,params)=> instance.get(url,{params});
// post 请求
export const post = (url,data)=>instance.post(url,data);

3. 调用接口获取数据 ---use

1. 引入 请求方法

<script>
    import {get} from "../utils/request"
    
     // 创建成功后请求数据
  created(){
    get("/api/v1/products").then((res)=>{
      // 不需要res.data.因为封装请求时,全局响应拦截返回值为res.data
      console.log(res);
      this.datas=res.data
    })
  },
</script>

2. 全局请求拦截,与全局响应拦截

// 全局请求拦截  axios 拦截器,
// Add a request interceptor
instance.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
// 全局响应拦截,返回结果之后执行
// Add a response interceptor
instance.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    ## 多操作一层,返回res.data
    return response.data;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

4. 同步方式调用接口 (async/await)

<script>
    import {get} from "../utils/request";
    export default{
        async created(){
            const products = await get ("/api/v1/products");
            console.log(products)
        }
    }
    ## 同步方式,不需要(.then)方法

</script>

5. API进化 ,load 封装 (services)

  1. 封装 服务 (方法)

    import {get} from "../utils/request";
    ​
    export function LoadProductsAPI(){
        return get("/api/v1/products")
    }
  2. use,替换get请求,直接调用API方法

    <script>
        import LoadProductsAPI from "../serviices/products";
        export default{
            async created(){
                const products = await LoadProductsAPI();
                console.log(products)
            }
        }
        ## 同步方式,不需要(.then)方法
    </script>

上一篇:有道词典_每日一句_2022/02


下一篇:【2022/02/02】thinkphp源码详细阅读(一)