小程序--仿axios的封装方法

小程序–仿axios的封装方法

介绍：由于小程序中不能使用axios，且请求是通过uni.request()发送请求获取数据，但是如果我们每个页面都用标准的uni.request()方法来获取数据，就会造成一个页面很多代码，不利于阅读和维护。其实，我们也可以把小程序发送请求的方法封装成类似于axios请求方法，并把请求的接口路径简化；是不是这样处理起来就很方便？那我们就来试一下吧！

• 1、首先，封装一个基础路径的request请求，并导出

  • config，接收请求时传过来的参数

  //封装请求函数，方便操作
  const baseUrl = 'https://XXX.XXX.XXX'  //请求的基础路径
  
  const request = async (config) => {
  
      //修改请求方法
      config.method = config.method || 'GET'
      config.url = baseUrl + config.url
  
      //调用小程序uni.request
      const [error, res] = await uni.request(config)
      if (!error) {
          return res  //记得return，不然会是undefined
      } else {
          console.log(res.data.message);
      }
  }
  //导出
  export default request
  

• 2、引入封装好的request方法，再封装一个api文件

  • 代码中的method，url，data会打包成一个对象，传入第一步中的config

  import request from '@/utils/request'
  
  export function getSomething(data){
      //记得return，不然会是undefined
      return request({ 
          method:'get',
          url:'http://xxx.xxx',
          data
      })
  }
  

• 3、在vue实例中调用接口,

  import {getSomething} from '@/api/test'
  
  async getSomethingFn(){
      const result = await getSomething(data) //data是要请求的参数
  }
  

总结：这样我们就可以做到仿axios在vue中的使用方法，这样就可以简化我们在vue中的代码操作，是不是有帮到你？赶紧来试一下吧！