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>