mpvue用promise封装小程序请求(同样使用于vue的项目)

22 篇文章 0 订阅
7 篇文章 0 订阅


import qs from 'qs'
let api = {
  //域名配置
  webUrl: "默认ip",
  post:function(vueObj,options){//post请求
    wx.showLoading({
      title: '加载中' // 数据请求前loading
    })
    var ipName='';
    !options.newUrl?ipName=this.webUrl:ipName=options.newUrl;
    return new Promise(function(resolve, reject) {
      wx.request({
        url:ipName+options.url, // 仅为示例,并非真实的接口地址
        data:qs.stringify(options.arg),
        method:'POST',
        header: {
          'content-type': !options.contentType?'application/json':options.contentType // 默认值
        },
        success: function (res) {
          wx.hideLoading()
          resolve(res.data)
        },
        fail: function (err) {
          wx.hideLoading()
           reject(err)
        },
        complete: function () {
          wx.hideLoading()
        }
      })
    })

  }
 
}
export default api

上面写法同样使用于vue项目,将wx.request改axios请求就好

post:function(vueObj,options){//post请求
     var ipName='';
     !options.newUrl?ipName=gob.webUrl:ipName=options.newUrl;

     return new Promise(function(resolve, reject) {
       axios.post(ipName+options.url,qs.stringify(options.arg))
          .then(function (response) {
            resolve(response.data);
          })
          .catch(function (error) {
            reject(error);
          });
    })
   },

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于这个问题,我可以给你一些简单的解释和示例代码。 Axios 是一个基于 Promise 的 HTTP 请求库,可以在浏览器和 Node.js 中使用。它提供了一种简单、易于使用的方式来发送 HTTP 请求,并且支持拦截器、请求和响应转换等高级功能。 在 Vue 项目使用 Axios,一般可以先在项目中安装 Axios: ``` npm install axios --save ``` 然后在需要使用 Axios 的组件中,可以这样引入和使用: ```javascript import axios from 'axios' // 发送 GET 请求 axios.get('/api/user').then(response => { console.log(response.data) }).catch(error => { console.log(error) }) // 发送 POST 请求 axios.post('/api/user', { name: 'John' }).then(response => { console.log(response.data) }).catch(error => { console.log(error) }) ``` 其中,`/api/user` 是你要请求的 API 地址,`get` 和 `post` 分别表示发送 GET 和 POST 请求。在请求成功和失败的回调中,分别可以获取到响应数据和错误信息。 另外,为了方便管理和统一处理请求,可以在项目中创建一个 Axios 实例,并对其进行封装。例如: ```javascript import axios from 'axios' const api = axios.create({ baseURL: '/api', timeout: 5000, headers: { 'Content-Type': 'application/json' } }) // 请求拦截器 api.interceptors.request.use(config => { // 在请求发送之前,可以对请求做一些处理,例如添加请求头、验证用户信息等 return config }, error => { // 如果请求错误,可以在这里进行统一处理,例如提示用户、重试请求等 return Promise.reject(error) }) // 响应拦截器 api.interceptors.response.use(response => { // 在获取响应数据之前,可以对响应做一些处理,例如解密数据、转换格式等 return response }, error => { // 如果响应错误,可以在这里进行统一处理,例如提示用户、重试请求等 return Promise.reject(error) }) export default api ``` 在这个示例中,我们创建了一个名为 `api` 的 Axios 实例,并在其中添加了请求拦截器和响应拦截器。这样,在每次发送请求和获取响应时,都会先经过这些拦截器,可以在其中进行一些共通的处理。 接下来,在组件中使用这个经过封装的 Axios 实例,可以像这样: ```javascript import api from '@/api' // 发送 GET 请求 api.get('/user').then(response => { console.log(response.data) }).catch(error => { console.log(error) }) // 发送 POST 请求 api.post('/user', { name: 'John' }).then(response => { console.log(response.data) }).catch(error => { console.log(error) }) ``` 这样,我们就可以在 Vue 项目中方便地使用 Axios 进行 HTTP 请求了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值