微信小程序wx.request请求封装,和跨域的解决。

news/2024/7/20 4:32:46 标签: javascript, 编辑器, 小程序

建议把所有请求抽离到不同页面对应的js文件中,可以方便后期的修改和排查问题,小程序请求是通过微信后台来请求我们的后台地址来进行后端映射、你请求的接口实际到微信的后端做了一道映射,微信后端拿到你的 wx.request 调用的 url、用后端请求后端,所以不会出现跨域问题

一、新建network文件夹并建立netwrok.js文件

javascript">import baseURL from "./config.js";
// 引入baseURL 后面会讲到
export default function request(options){
  // options为调用时传入的参数对象
  return new Promise((resolve,reject)=>{
    wx.request({
      header:{
        'pc-token':'4a82b23dbbf3b23fd8aa291076e660ec'
         //定义公共头部信息
      },
      url:baseURL+options.url, 
      // 拼接请求地址
      data:options.data||{},
      // 传入data参数
      method:options.method||'get',
      // 传入请求类型默认为get
      success:function(res){
        resolve(res)
        // 成功回调
      },
      fail:function(res){
        reject(res)
        // 失败回调
      }
    })
  })
}

二、在network中建立config.js文件配置公共信息

javascript">const baseURL='http://xxxxxxxxxxx'
// 配置公共地址并暴露
export default baseURL

三、建立对应的js文件,配置单个请求文件

javascript">import requset from "./network";
// 引入requset请求
export  function getList(page){
  // 配置当前请求的地址和传入的参数
  return requset({
    url:"/getCarList",
    data:{
      page
    },
    method:'post'
  })
}

四、使用

javascript">import {getList} from "../../network/req.js";
// 引入封装好的单个请求

// 调用请求获取数据
getList(1).then((res)=>{
      this.setData({
        list:res.data
      })
  })

 

五、跨域的配置,打上对勾即可!


http://www.niftyadmin.cn/n/861351.html

相关文章

React 三种获取ref方式

获取ref三种方法 1、字符串形式的ref class Box extends React.Component{render(){return <input refinput type"text"/>}} 2、回调形式的ref class Box extends React.Component{clic(){console.log(this.input.value)}render(){return <input onBlur{t…

Proxy代理如何配置?为什么配置无效?

方法一 在package.json中追加如下配置 proxy:http://localhost:5000 说明 #优点&#xff1a;配置简单&#xff0c;前端请求资源时可以不加任何前缀 #缺点&#xff1a;不能配置多个代理 #工作方式&#xff1a;上述方式配置代理&#xff0c;当请求了3000不存在的资源时&#x…

axios解决Post传参问题

问题&#xff1a;传参时后台接收到的参数是本来是一对键值对&#xff0c;普通的用data传参会将参数全部传入键名中去&#xff0c;并数据类型是字符串&#xff0c;这样的话后端无法获取参数。 解决&#xff1a;new 一个 URLsearchParams() 对象&#xff0c;这个对象内置了appen…

2021年判断浏览器最新写法,你都掌握了吗?

目前浏览器更新幅度变快&#xff0c;导致之前很多判断浏览器方法失效&#xff0c;以下是最新判断浏览器方法 function myBrowser() {var userAgent navigator.userAgent; //取得浏览器的userAgent字符串var isOpera userAgent.indexOf("Opera") > -1;if (userA…

React开发者工具和Redux开发者工具的使用。

一、React开发者工具 应用商店下载React Developer Tools 并固定在状态栏即可用开发者工具查看组件的状态。 二、Redux开发者工具 #应用商店下载redux #npm下载redux-devtools-extension #在store.js中引入composeWithDevTools import {composeWithDevTools} from redux-devt…

qiankun微服务使用流程

一、创建基座&#xff08;主服务&#xff09; 二、创建微服务 三、主服务main.js配置 // 引入qiankun import { registerMicroApps, start } from "qiankun"; registerMicroApps([{name: "vueApp", // 应用的名字entry: "//localhost:3001", …

企业微信通讯录组件如何在Vue使用,ww-open-data如何使用,antd的a-tree如何配合通讯录组件?

一.首先在index.html使用CDN引入 企业微信的JS文件 <script src"https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script src"https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script> 二.单个封装…

如何实现前端优化,如何发现哪些前端优化?

1.一幅图看出哪些需要优化&#xff01;怎么做呢&#xff1f; 2.npm安装webpack-bundle-analyzer npm install webpack-bundle-analyzer -D 3.配置webpack-bundle-analyzer //在vue.config.js引入 const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnaly…