网络请求全局封装
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)
-
封装 服务 (方法)
import {get} from "../utils/request"; export function LoadProductsAPI(){ return get("/api/v1/products") }
-
use,替换get请求,直接调用API方法
<script> import LoadProductsAPI from "../serviices/products"; export default{ async created(){ const products = await LoadProductsAPI(); console.log(products) } } ## 同步方式,不需要(.then)方法 </script>