您现在的位置是:首页 > 前端开发 > Uni-App

uniapp请求封装

admin2019-04-03Uni-App 人已围观

简介uniapp,请求封装,接口分离,方便修改和维护。

话不多说,我只喜欢代码,直接上代码。代码如下


我们开始封装吧!!!!

1、在你文件夹下面创建一个Api文件夹



2、创建一个 index.js 文件夹
代码如下: 直接可以复制到你的index.js 文件夹里面
 

const httpServer = (opts, data) => {

    let httpDefaultOpts = {
        url: opts.url,
        data: data,
        method: opts.method,
        header: opts.method == 'get' ? {
        'X-Requested-With': 'XMLHttpRequest',
        "Accept": "application/json",
        "Content-Type": "application/json; charset=UTF-8"

    } : {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

    },
        dataType: 'json',
    }

    let promise = new Promise(function(resolve, reject) {
        uni.request(httpDefaultOpts).then(
            (res) => {
                resolve(res[1])
            }
        ).catch(
            (response) => {
                reject(response)
            }
        )
    })

    return promise

}

export default httpServer

 

3、创建一个 baseUrl.js 文件夹,是用来存放请求地址的
 

import {web} from "./config.js"

const serviceModule = {
    shang: {
        url: web.www+'app/addition/ches.php',
        method: 'post'
    },
    datas:{
        url:web.webUrl+'basic/data/hospital.php',
        method: 'get'
    }
};


const ApiSetting = { ...serviceModule
}
export default ApiSetting

 


4、创建一个  config.js  文件夹,这里js文件夹是存放 域名配置的
 

//开发模式
module.exports={
  web:{
    www: 'http://localhost:88/',
    webUrl:'https://api.baidu.com/'
  }
};

 


5、在 main.js 文件夹全局导入
 

import axios from './Api'
import baseUrl from './Api/baseUrl'

Vue.prototype.$axios =axios;
Vue.prototype.$baseUrl =baseUrl;
 


6、在页面中引入
 

                        this.$axios(this.$baseUrl.shang,{
                            'img':res.tempFilePath
                        })
                        .then(res =>{
                            console.log(res)
                        },(error) =>{
                            console.log(error)
                        })
 


下载源码
Chen请求封装.zip
0fad525f02a80fef725a4049fd4c888a.zip (1.88 KB)

很赞哦!18928

文章评论

      匿名评论
    • 评论
    人参与,条评论

站点信息

  • 建站时间:2018-12-23
  • 网站程序:帝国CMS7.5
  • 文章统计: 183
  • 文章评论:490条
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们