Vue教程100--axios的实例

axios的实例

• 为什么要创建axios的实例呢?

  • 当我们从axios模块中导入对象时, 使用的实例是默认的实例
  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了
  • 但是后续开发中, 某些配置可能会不太一样
  • 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
  • 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息

 # 使用实例的方式，将不同路由的公共的部分抽离，然后使用实例完成上面的请求过程
 const instance1 = axios.create({
   baseURL:"http://127.0.0.1:9000/home",
   timeout:5000,
 })
 ​
 const instance2 = axios.create({
   baseURL:"http://127.0.0.1:9000/about",
   timeout:10000,
 })
 ​
 # 使用实例进行访问
 instance1({
   url:"/article",
   method:"get"
 }).then(res=>{
   console.log(res);
 })

常见的请求逻辑

 # 我们在created的时候去请求接口拿到数据封装到组件中
 <template>
   <div id="app">
     <p>{{result}}</p>
   </div>
 </template>
 ​
 <script>
 import axios from "axios"
 export default {
   name: 'App',
   data(){
     return {
       result:""
     }
   },
   created() {
     axios({
       url:"http://httpbin.org",
       method:"get",
     }).then(res=>{
       this.result = res.data
     })
   }
 }
 </script>
 ​
 <style>
 ​
 </style>

不好的原因：我们上面实现的代码对于第三方的依赖太强了，当axios不在继续更新和维护的时候，我们的所有组件中的数据加载的逻辑都要发生改变

axios封装

 import originAxios from "axios"
 ​
 export default function request(option,sucess,failure){
   return new Promise((resolve,reject)=>{
     const instance = originAxios.create({
       baseURL:"/api",
       timeout:5000,
       headers:""
     });
 ​
     instance(option).then(res=>{
       console.log(res);
       sucess()
     }).catch(err=>{
       console.log(err);
       failure()
     })
   })
 }

• 第二种方式

 import originAxios from "axios"
 export default function request(option){
     const instance = originAxios.create({
       baseURL:"/api",
       timeout:5000,
       headers:""
     });
     
     //实际上的instance的返回值是一个promise
     return instance(option)
 }