Uni-App Http请求

南波屎味 發表於 2023-10-21 23:01:00

该插件适用于一般的请求场景，
只支持<code>post</code>、<code>get</code>、<code>put</code>和<code>delete</code>请求，目前不适用于其他的请求形式，比如上传，下载等。插件定位为小而美，而不是大而全，目标是切合实际，开箱即用。
<h3 id="5z7bn9">平台差异说明</h3>
<table>
<thead>
<tr><th>App</th><th>H5</th><th>微信小程序</th><th>支付宝小程序</th><th>百度小程序</th><th>头条小程序</th><th>QQ小程序</th></tr>
</thead>
<tbody>
<tr>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
</tbody>
</table>
由于某些小程序平台的限制：
<ul>
<li>delete请求，不支持支付宝和头条小程序(HX2.6.15)</li>
<li>put请求，不支持支付宝小程序(HX2.6.15)</li>
</ul>
<h3 id="9fp529">基本使用</h3>
<h4 id="ghhsc9">get | post | put | delete(url, params, header).then(res => {}).catch(res => {})</h4>
<ul>
<li><code>url</code> 请求的URL，可以完整的URL(http开头)，或者是路径的一部分，这时会自动拼接上<code>baseUrl</code>(一般为api的域名部分)</li>
<li><code>params</code> 请求的参数，对象形式，如”{name: ‘lisa’, age: 23}”，该参数是可选的</li>
<li><code>header</code> 请求的header，对象形式，如果token等字段，建议通过配置写入，该参数是可选的
<code>get</code>和<code>post</code>都挂载在<code>$u</code>对象下，其中<code>get</code>和<code>post</code>使用方法完全一致，只是一个为<code>this.$u.get</code>，一个为<code>this.$u.post</code>,使用如下：
一般来说，只在<code>then</code>中接收返回值即可，<code>catch</code>无特殊情况，无需编写和理会，因为如果服务端返回的不是200状态，插件内部会弹出model提示
<ol class="linenums">
<li class="L0"><code class="hljs xml"><script></code></li>
<li class="L1"><code class="hljs coffeescript"> export default {</code></li>
<li class="L2"><code class="hljs"> onLoad() {</code></li>
<li class="L3"><code class="hljs cpp"> // 不带header</code></li>
<li class="L4"><code class="hljs bash"> this.$u.post('http://www.example.com', {</code></li>
<li class="L5"><code class="hljs http"> id: 3,</code></li>
<li class="L6"><code class="hljs http"> menu: 1</code></li>
<li class="L7"><code class="hljs javascript"> }).then(res => {</code></li>
<li class="L8"><code class="hljs coffeescript"> console.log(res);</code></li>
<li class="L9"><code class="hljs"> });</code></li>
<li class="L0"><code class="hljs"></code></li>
<li class="L1"><code class="hljs bash"> // 带上header(对象形式)，由于header为第三个参数，如果不需要请求参数，第二个参数传一个空对象"{ }"即可</code></li>
<li class="L2"><code class="hljs cs"> this.$u.get('http://www.example.com', {}, {</code></li>
<li class="L3"><code class="hljs bash"> token: 'xyz'</code></li>
<li class="L4"><code class="hljs javascript"> }).then(res => {</code></li>
<li class="L5"><code class="hljs coffeescript"> console.log(res);</code></li>
<li class="L6"><code class="hljs"> });</code></li>
<li class="L7"><code class="hljs"> }</code></li>
<li class="L8"><code class="hljs"> }</code></li>
<li class="L9"><code class="hljs apache"></script></code></li>
</ol>
<h3 id="b822lv">配置参数</h3>
配置参数的时候，需要调用<code>$u.http.setConfig()</code>方法，传递一个对象作为参数。
<ul>
<li>强烈建议在此配置统一请求的<code>baseUrl</code></li>
<li>同时看情况是否开启(默认关闭)请求加载中的loading，该功能需要设置一个时间(默认800ms)，如果超过此时间，请求尚未返回，则显示一个loading，直至返回后，取消loading。</li>
</ul>
说明：请求loading超时时间的意义为，一般情况下，请求会在几十毫秒返回，时间极短，无需loading，如果显示loading，会导致动画一闪而过，体验不好。如果用户网络慢，或者服务器堵塞，可能一个请求需要几秒钟，这时请求达到设定时间(800ms)，就会显示loading，几秒钟后请求返回，loading消失。
提示
uView在1.1.0版本后，建议将拦截器内容部分，写入到独立的外部JS文件中，而不是写在App.vue中，这样有更好的可读性，可维护性。 uView已经为用户考虑好了所有的情况，并详细指导您如何在外部JS中引用vuex变量以及Vue的<code>this</code>实例等。 建议在根目录下新建<code>/common/http.interceptor.js</code>文件，也即创建<code>common</code>目录(如果没有的话)，再创建<code>http.interceptor.js</code>文件，将拦截器相关代码写在里面。
以下为可选的配置参数，这个配置是一次配置，全局通用的。
<ol class="linenums">
<li class="L0"><code class="hljs ini">config =</code></li>
<li class="L1"><code class="hljs">{</code></li>
<li class="L2"><code class="hljs cs"> baseUrl: '', // 请求的本域名</code></li>
<li class="L3"><code class="hljs bash"> method: 'POST',</code></li>
<li class="L4"><code class="hljs cpp"> // 设置为json，返回后会对数据进行一次JSON.parse()</code></li>
<li class="L5"><code class="hljs bash"> dataType: 'json',</code></li>
<li class="L6"><code class="hljs cpp"> showLoading: true, // 是否显示请求中的loading</code></li>
<li class="L7"><code class="hljs cs"> loadingText: '请求中...', // 请求loading中的文字提示</code></li>
<li class="L8"><code class="hljs cpp"> loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms</code></li>
<li class="L9"><code class="hljs cpp"> originalData: false, // 是否在拦截器中返回服务端的原始数据</code></li>
<li class="L0"><code class="hljs cpp"> loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透</code></li>
<li class="L1"><code class="hljs">}</code></li>

</ol>
具体写法，建议在写在<code>/common/http.interceptor.js</code>(如无此文件夹和文件，请手动创建，一次配置，全局通用)，写完之后，请在根目录的<code>main.js</code> 的<code>new Vue()</code>和<code>app.$mount()</code>之间引入此文件，在<code>new Vue()</code>后面的原因是，外部JS文件需要引用vue的实例，也即<code>this</code>对象，要等<code>main.js</code>中通过<code>new</code>创建了实例之后才能引用。在<code>app.$mount()</code>之前的原因是，在Vue挂载<code>this</code>实例(也即初始化<code>App.vue</code>)之前配置请求信息，所以在<code>App.vue</code>中也能正常发出请求。
以下为在<code>main.js</code>中的引入示例：
<ol class="linenums">
<li class="L0"><code class="hljs cpp">// main.js</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs cpp">// 此为main.js本身已有内容</code></li>
<li class="L3"><code class="hljs cpp">const app = new Vue({</code></li>
<li class="L4"><code class="hljs css">...App</code></li>
<li class="L5"><code class="hljs">})</code></li>
<li class="L6"><code class="hljs"></code></li>
<li class="L7"><code class="hljs cpp">// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径</code></li>
<li class="L8"><code class="hljs coffeescript">import httpInterceptor from '@/common/http.interceptor.js'</code></li>
<li class="L9"><code class="hljs bash">// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)</code></li>
<li class="L0"><code class="hljs css">Vue.use(httpInterceptor, app)</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs bash">app.$mount()</code></li>

</ol>
下面为拦截器的具体内容：
<ol class="linenums">
<li class="L0"><code class="hljs cpp">// common/http.interceptor.js</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs cpp">// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，</code></li>
<li class="L3"><code class="hljs bash">// 为一个Vue的实例，也即每个页面的"this"</code></li>
<li class="L4"><code class="hljs ruby">// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueuse.html</code></li>
<li class="L5"><code class="hljs coffeescript">const install = (Vue, vm) => {</code></li>
<li class="L6"><code class="hljs cpp"> // 此为自定义配置参数，具体参数见上方说明</code></li>
<li class="L7"><code class="hljs bash"> Vue.prototype.$u.http.setConfig({</code></li>
<li class="L8"><code class="hljs bash"> baseUrl: 'https://api.example.com',</code></li>
<li class="L9"><code class="hljs bash"> loadingText: '努力加载中~',</code></li>
<li class="L0"><code class="hljs http"> loadingTime: 800,</code></li>
<li class="L1"><code class="hljs cpp"> // ......</code></li>
<li class="L2"><code class="hljs"> });</code></li>
<li class="L3"><code class="hljs">}</code></li>
<li class="L4"><code class="hljs"></code></li>
<li class="L5"><code class="hljs coffeescript">export default {</code></li>
<li class="L6"><code class="hljs sql"> install</code></li>
<li class="L7"><code class="hljs">}</code></li>

</ol>
<h3 id="1k94bq">请求拦截和响应拦截(如配置，每次请求都会执行)</h3>
此两个拦截，是可选配置的
<h4 id="582u8p">何谓请求拦截？</h4>
顾名思义，就是在请求发出之前，对请求做一些额外处理，比如对不同api接口，携带不同的<code>header</code>参数，或者(也是最重要) 配置统一的token到<code>header</code>中，这样就不用每次请求，都写token相关的部分到<code>this.$u.post()</code>的第三个请求头参数中，如下：
<h4 id="3ul2oi">$u.http.interceptor.request = (config) => { … }</h4>
<ul>
<li><code>config</code> 此<code>config</code>参数，带有header和url属性，header属性是为了添加请求头信息，url属性是为了对某些url进行特别处理
一般建议对此进行token的配置，说明：由于本拦截是每次请求都会调用的，如果在此写入token到header中，即使再次您重新登录，token发生变化，也无需再次调用本拦截
<ol class="linenums">
<li class="L0"><code class="hljs cpp">// common/http.interceptor.js</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs coffeescript">const install = (Vue, vm) => {</code></li>
<li class="L3"><code class="hljs cpp"> // 此为自定义配置参数，具体参数见上方说明</code></li>
<li class="L4"><code class="hljs bash"> Vue.prototype.$u.http.setConfig({</code></li>
<li class="L5"><code class="hljs cpp"> // ......</code></li>
<li class="L6"><code class="hljs"> });</code></li>
<li class="L7"><code class="hljs"></code></li>
<li class="L8"><code class="hljs cpp"> // 请求拦截部分，如配置，每次请求前都会执行</code></li>
<li class="L9"><code class="hljs coffeescript"> Vue.prototype.$u.http.interceptor.request = (config) => {</code></li>
<li class="L0"><code class="hljs cpp"> // 引用token</code></li>
<li class="L1"><code class="hljs cpp"> // 方式一，存放在vuex的token，假设使用了uView封装的vuex方式</code></li>
<li class="L2"><code class="hljs ruby"> // 见：https://uviewui.com/components/globalVariable.html</code></li>
<li class="L3"><code class="hljs cpp"> // config.header.token = vm.token;</code></li>
<li class="L4"><code class="hljs"></code></li>
<li class="L5"><code class="hljs bash"> // 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取</code></li>
<li class="L6"><code class="hljs bash"> // config.header.token = vm.$store.state.token;</code></li>
<li class="L7"><code class="hljs"></code></li>
<li class="L8"><code class="hljs cpp"> // 方式三，如果token放在了globalData，通过getApp().globalData获取</code></li>
<li class="L9"><code class="hljs cpp"> // config.header.token = getApp().globalData.username;</code></li>
<li class="L0"><code class="hljs"></code></li>
<li class="L1"><code class="hljs cpp"> // 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的</code></li>
<li class="L2"><code class="hljs cpp"> // 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值</code></li>
<li class="L3"><code class="hljs bash"> // const token = uni.getStorageSync('token');</code></li>
<li class="L4"><code class="hljs cpp"> // config.header.token = token;</code></li>
<li class="L5"><code class="hljs bash"> config.header.Token = 'xxxxxx';</code></li>
<li class="L6"><code class="hljs"></code></li>
<li class="L7"><code class="hljs bash"> // 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值</code></li>
<li class="L8"><code class="hljs bash"> if(config.url == '/user/login') config.header.noToken = true;</code></li>
<li class="L9"><code class="hljs bash"> // 最后需要将config进行return</code></li>
<li class="L0"><code class="hljs bash"> return config;</code></li>
<li class="L1"><code class="hljs bash"> // 如果return一个false值，则会取消本次请求</code></li>
<li class="L2"><code class="hljs bash"> // if(config.url == '/user/rest') return false; // 取消某次请求</code></li>
<li class="L3"><code class="hljs"> }</code></li>
<li class="L4"><code class="hljs">}</code></li>
<li class="L5"><code class="hljs"></code></li>
<li class="L6"><code class="hljs coffeescript">export default {</code></li>
<li class="L7"><code class="hljs sql"> install</code></li>
<li class="L8"><code class="hljs">}</code></li>

</ol>
<h4 id="595a8n">何谓响应拦截？</h4>
响应拦截，意味着是在请求返回时，对返回的数据进行一些处理，如不同的状态对应的关系，比如约定状态码200为成功，则把返回数据返回到<code>this.$u.post().then()</code>的<code>then</code>中，如果为201(约定为token失效，需要登录)，则可以在在拦截中进行toast 提示，并跳转到登录页。
注意
响应拦截器中默认返回的是<code>response.data</code>，如果您的需求比较特殊，需要返回<code>response</code>，请在”$u.http.setConfig”配置 <code>originalData</code>为<code>true</code>，如果配置了，服务端返回的”response.statusCode”不为”200”的时候，将不会自动弹出”modal”框，请自行在响应拦截器中配置相关行为。
<h4 id="bhw4zv">$u.http.interceptor.response = (res) => { … }</h4>
<ul>
<li><code>res</code> 该参数为服务器返回的数据，具体可打印查看<ol class="linenums">
<li class="L0"><code class="hljs cpp">// common/http.interceptor.js</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs coffeescript">const install = (Vue, vm) => {</code></li>
<li class="L3"><code class="hljs cpp"> // 此为自定义配置参数，具体参数见上方说明</code></li>
<li class="L4"><code class="hljs bash"> Vue.prototype.$u.http.setConfig({</code></li>
<li class="L5"><code class="hljs cpp"> // ......</code></li>
<li class="L6"><code class="hljs"> });</code></li>
<li class="L7"><code class="hljs"></code></li>
<li class="L8"><code class="hljs cpp"> // 请求拦截部分，如配置，每次请求前都会执行，见上方说明</code></li>
<li class="L9"><code class="hljs coffeescript"> Vue.prototype.$u.http.interceptor.request = (config) => {</code></li>
<li class="L0"><code class="hljs cpp"> // ......</code></li>
<li class="L1"><code class="hljs bash"> return config;</code></li>
<li class="L2"><code class="hljs"> }</code></li>
<li class="L3"><code class="hljs"></code></li>
<li class="L4"><code class="hljs cpp"> // 响应拦截，如配置，每次请求结束都会执行本方法</code></li>
<li class="L5"><code class="hljs coffeescript"> Vue.prototype.$u.http.interceptor.response = (res) => {</code></li>
<li class="L6"><code class="hljs bash"> if(res.code == 200) {</code></li>
<li class="L7"><code class="hljs cpp"> // res为服务端返回值，可能有code，result等字段</code></li>
<li class="L8"><code class="hljs coffeescript"> // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到</code></li>
<li class="L9"><code class="hljs bash"> // 如果配置了originalData为true，请留意这里的返回值</code></li>
<li class="L0"><code class="hljs bash"> return res.result;</code></li>
<li class="L1"><code class="hljs bash"> } else if(res.code == 201) {</code></li>
<li class="L2"><code class="hljs cpp"> // 假设201为token失效，这里跳转登录</code></li>
<li class="L3"><code class="hljs bash"> vm.$u.toast('验证失败，请重新登录');</code></li>
<li class="L4"><code class="hljs coffeescript"> setTimeout(() => {</code></li>
<li class="L5"><code class="hljs cpp"> // 此为uView的方法，详见路由相关文档</code></li>
<li class="L6"><code class="hljs bash"> vm.$u.route('/pages/user/login')</code></li>
<li class="L7"><code class="hljs"> }, 1500)</code></li>
<li class="L8"><code class="hljs bash"> return false;</code></li>
<li class="L9"><code class="hljs bash"> } else {</code></li>
<li class="L0"><code class="hljs bash"> // 如果返回false，则会调用Promise的reject回调，</code></li>
<li class="L1"><code class="hljs coffeescript"> // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值</code></li>
<li class="L2"><code class="hljs bash"> return false;</code></li>
<li class="L3"><code class="hljs"> }</code></li>
<li class="L4"><code class="hljs"> }</code></li>
<li class="L5"><code class="hljs">}</code></li>
<li class="L6"><code class="hljs"></code></li>
<li class="L7"><code class="hljs coffeescript">export default {</code></li>
<li class="L8"><code class="hljs sql"> install</code></li>
<li class="L9"><code class="hljs">}</code></li>

</ol>
实践： 上面写完了请求配置(强烈建议)，请求拦截(可选，推荐)，响应拦截(可选，推荐)，下面为<code>post</code>何<code>get</code>请求的示例：
<ol class="linenums">
<li class="L0"><code class="hljs ruby">// /pages/index/index.vue</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs xml"><script></code></li>
<li class="L3"><code class="hljs coffeescript"> export default {</code></li>
<li class="L4"><code class="hljs"> onLoad() {</code></li>
<li class="L5"><code class="hljs cs"> this.$u.get('/ebapi/store_api/hot_search', {</code></li>
<li class="L6"><code class="hljs http"> id: 2</code></li>
<li class="L7"><code class="hljs javascript"> }).then(res => {</code></li>
<li class="L8"><code class="hljs coffeescript"> this.result = res;</code></li>
<li class="L9"><code class="hljs"> })</code></li>
<li class="L0"><code class="hljs"></code></li>
<li class="L1"><code class="hljs bash"> this.$u.post('/ebapi/public_api/index', {</code></li>
<li class="L2"><code class="hljs http"> id: 1</code></li>
<li class="L3"><code class="hljs javascript"> }).then(res => {</code></li>
<li class="L4"><code class="hljs coffeescript"> this.result = res;</code></li>
<li class="L5"><code class="hljs"> })</code></li>
<li class="L6"><code class="hljs"> }</code></li>
<li class="L7"><code class="hljs"> }</code></li>
<li class="L8"><code class="hljs apache"></script></code></li>

</ol>
<h3 id="6ir15b">如何使用await进行同步操作</h3>
<ul>
<li>有时候我们需要同步的写法，即下一步的结果依赖于上一步的请求返回结果，当然我们可以把下一步的写法，放入请求的<code>then</code>回调中，但这是不直观的，比如我们需要打印请求的返回结果，可以这样做：</li>

</ul>
<ol class="linenums">
<li class="L0"><code class="hljs coffeescript">export default {</code></li>
<li class="L1"><code class="hljs http"> methods: {</code></li>
<li class="L2"><code class="hljs"> login() {</code></li>
<li class="L3"><code class="hljs cpp"> // 正确，但是需要在回调中打印</code></li>
<li class="L4"><code class="hljs javascript"> this.$u.post('/user/login').then(res => {</code></li>
<li class="L5"><code class="hljs coffeescript"> console.log(res);</code></li>
<li class="L6"><code class="hljs"> })</code></li>
<li class="L7"><code class="hljs"></code></li>
<li class="L8"><code class="hljs coffeescript"> // 错误，如果想要使用同步的形式，无需then回调，且需要await关键字</code></li>
<li class="L9"><code class="hljs javascript"> let result = this.$u.post('/user/login').then(res => {</code></li>
<li class="L0"><code class="hljs coffeescript"> console.log(res);</code></li>
<li class="L1"><code class="hljs"> })</code></li>
<li class="L2"><code class="hljs coffeescript"> console.log(result);</code></li>
<li class="L3"><code class="hljs"></code></li>
<li class="L4"><code class="hljs coffeescript"> // 错误，无需then回调是对的，但是ret会为undefined，因为登录是一个异步过程(可能需要几十毫秒)</code></li>
<li class="L5"><code class="hljs coffeescript"> // 下一行打印的时候，请求还没返回，所以ret会为undefined</code></li>
<li class="L6"><code class="hljs bash"> let ret = this.$u.post('/user/login');</code></li>
<li class="L7"><code class="hljs coffeescript"> console.log(ret);</code></li>
<li class="L8"><code class="hljs"> }</code></li>
<li class="L9"><code class="hljs"> }</code></li>
<li class="L0"><code class="hljs">}</code></li>

</ol>
上面演示了错误的示例，如果下一步需要依赖上一步的返回结果，并且需要需要同步的写法，我们可以结合”async/await”，如不理解这个写法，可直接使用，或者搜索相关知识。 说明：我们在某个地方使用<code>await</code>，意味着调用的函数本身或者生命周期，必须要加上<code>async</code>前缀，否则出错
此为在onLoad生命周期中的请求示例：
<ol class="linenums">
<li class="L0"><code class="hljs coffeescript">export default {</code></li>
<li class="L1"><code class="hljs cpp"> // 可以放心在生命周期前加上async，不会导致问题</code></li>
<li class="L2"><code class="hljs cs"> async onLoad() {</code></li>
<li class="L3"><code class="hljs cs"> let ret = await this.$u.post('/user/login');</code></li>
<li class="L4"><code class="hljs python"> // 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果</code></li>
<li class="L5"><code class="hljs coffeescript"> // 意味着这里的console.log是等待了几十毫秒请求返回后才执行的</code></li>
<li class="L6"><code class="hljs coffeescript"> console.log(ret);</code></li>
<li class="L7"><code class="hljs"> }</code></li>
<li class="L8"><code class="hljs">}</code></li>

</ol>
此为在methods方法中的请求示例：
<ol class="linenums">
<li class="L0"><code class="hljs coffeescript">export default {</code></li>
<li class="L1"><code class="hljs http"> methods: {</code></li>
<li class="L2"><code class="hljs cs"> async login() {</code></li>
<li class="L3"><code class="hljs cs"> let ret = await this.$u.post('/user/login');</code></li>
<li class="L4"><code class="hljs python"> // 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果</code></li>
<li class="L5"><code class="hljs coffeescript"> // 意味着这里的console.log是等待了几十毫秒请求返回后才执行的</code></li>
<li class="L6"><code class="hljs coffeescript"> console.log(ret);</code></li>
<li class="L7"><code class="hljs"> }</code></li>
<li class="L8"><code class="hljs"> }</code></li>
<li class="L9"><code class="hljs">}</code></li>

</ol>
<h3 id="519enj">API集中管理</h3>
这里说的集中管理，是指把各个请求，统一放到一个文件中进行管理，这样的好处是不用每次调用<code>this.$u.get</code>时都需要传入<code>url</code>参数，一些固定的请求参数也可以不用显式的传入，如下为配置后的使用示例：
<ol class="linenums">
<li class="L0"><code class="hljs javascript">this.$u.api.getSearch().then(res => {</code></li>
<li class="L1"><code class="hljs coffeescript"> console.log(res);</code></li>
<li class="L2"><code class="hljs">})</code></li>

</ol>
此部分内容放到了另外的专题，请移步：API集中管理
<h3 id="c4e1rd">完整示例</h3>
如果您不想阅读上方的内容的，或者觉得繁琐，下面给出一个完整的示例，复制修改某些提示的值即可直接使用
<ol class="linenums">
<li class="L0"><code class="hljs cpp">// /common/http.interceptor.js</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs coffeescript">// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量</code></li>
<li class="L3"><code class="hljs coffeescript">const install = (Vue, vm) => {</code></li>
<li class="L4"><code class="hljs cpp"> // 此为自定义配置参数，具体参数见上方说明</code></li>
<li class="L5"><code class="hljs bash"> Vue.prototype.$u.http.setConfig({</code></li>
<li class="L6"><code class="hljs bash"> baseUrl: 'https://api.example.com',</code></li>
<li class="L7"><code class="hljs bash"> loadingText: '努力加载中~',</code></li>
<li class="L8"><code class="hljs http"> loadingTime: 800,</code></li>
<li class="L9"><code class="hljs cpp"> // ......</code></li>
<li class="L0"><code class="hljs"> });</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs cpp"> // 请求拦截，配置Token等参数</code></li>
<li class="L3"><code class="hljs coffeescript"> Vue.prototype.$u.http.interceptor.request = (config) => {</code></li>
<li class="L4"><code class="hljs cpp"> // 引用token</code></li>
<li class="L5"><code class="hljs cpp"> // 方式一，存放在vuex的token，假设使用了uView封装的vuex方式</code></li>
<li class="L6"><code class="hljs ruby"> // 见：https://uviewui.com/components/globalVariable.html</code></li>
<li class="L7"><code class="hljs cpp"> // config.header.token = vm.token;</code></li>
<li class="L8"><code class="hljs"></code></li>
<li class="L9"><code class="hljs bash"> // 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取</code></li>
<li class="L0"><code class="hljs bash"> // config.header.token = vm.$store.state.token;</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs cpp"> // 方式三，如果token放在了globalData，通过getApp().globalData获取</code></li>
<li class="L3"><code class="hljs cpp"> // config.header.token = getApp().globalData.username;</code></li>
<li class="L4"><code class="hljs"></code></li>
<li class="L5"><code class="hljs cpp"> // 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的</code></li>
<li class="L6"><code class="hljs cpp"> // 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值</code></li>
<li class="L7"><code class="hljs bash"> // const token = uni.getStorageSync('token');</code></li>
<li class="L8"><code class="hljs cpp"> // config.header.token = token;</code></li>
<li class="L9"><code class="hljs bash"> config.header.Token = 'xxxxxx';</code></li>
<li class="L0"><code class="hljs"></code></li>
<li class="L1"><code class="hljs bash"> // 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值</code></li>
<li class="L2"><code class="hljs bash"> if(config.url == '/user/login') config.header.noToken = true;</code></li>
<li class="L3"><code class="hljs bash"> // 最后需要将config进行return</code></li>
<li class="L4"><code class="hljs bash"> return config;</code></li>
<li class="L5"><code class="hljs bash"> // 如果return一个false值，则会取消本次请求</code></li>
<li class="L6"><code class="hljs bash"> // if(config.url == '/user/rest') return false; // 取消某次请求</code></li>
<li class="L7"><code class="hljs"> }</code></li>
<li class="L8"><code class="hljs"></code></li>
<li class="L9"><code class="hljs cpp"> // 响应拦截，判断状态码是否通过</code></li>
<li class="L0"><code class="hljs coffeescript"> Vue.prototype.$u.http.interceptor.response = (res) => {</code></li>
<li class="L1"><code class="hljs bash"> if(res.code == 200) {</code></li>
<li class="L2"><code class="hljs cpp"> // res为服务端返回值，可能有code，result等字段</code></li>
<li class="L3"><code class="hljs coffeescript"> // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到</code></li>
<li class="L4"><code class="hljs bash"> // 如果配置了originalData为true，请留意这里的返回值</code></li>
<li class="L5"><code class="hljs bash"> return res.result;</code></li>
<li class="L6"><code class="hljs bash"> } else if(res.code == 201) {</code></li>
<li class="L7"><code class="hljs cpp"> // 假设201为token失效，这里跳转登录</code></li>
<li class="L8"><code class="hljs bash"> vm.$u.toast('验证失败，请重新登录');</code></li>
<li class="L9"><code class="hljs coffeescript"> setTimeout(() => {</code></li>
<li class="L0"><code class="hljs cpp"> // 此为uView的方法，详见路由相关文档</code></li>
<li class="L1"><code class="hljs bash"> vm.$u.route('/pages/user/login')</code></li>
<li class="L2"><code class="hljs"> }, 1500)</code></li>
<li class="L3"><code class="hljs bash"> return false;</code></li>
<li class="L4"><code class="hljs bash"> } else {</code></li>
<li class="L5"><code class="hljs bash"> // 如果返回false，则会调用Promise的reject回调，</code></li>
<li class="L6"><code class="hljs coffeescript"> // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值</code></li>
<li class="L7"><code class="hljs bash"> return false;</code></li>
<li class="L8"><code class="hljs"> }</code></li>
<li class="L9"><code class="hljs"> }</code></li>
<li class="L0"><code class="hljs">}</code></li>
<li class="L1"><code class="hljs"></code></li>
<li class="L2"><code class="hljs coffeescript">export default {</code></li>
<li class="L3"><code class="hljs sql"> install</code></li>
<li class="L4"><code class="hljs">}</code></li>

</ol>
具体请求使用示例：
<pre class="prettyprint linenums prettyprinted"><button class="btn btn-danger btn-sm btn-copy"> 复制代码</button></pre>
<ol class="linenums">
<li class="L0"><code class="hljs cpp">// login.vue</code></li>
<li class="L1"><code class="hljs coffeescript">export default {</code></li>
<li class="L2"><code class="hljs http"> methods: {</code></li>
<li class="L3"><code class="hljs cpp"> // post示例</code></li>
<li class="L4"><code class="hljs"> sumbitByPost() {</code></li>
<li class="L5"><code class="hljs bash"> this.$u.post('/user/login', {</code></li>
<li class="L6"><code class="hljs bash"> username: 'lisa',</code></li>
<li class="L7"><code class="hljs bash"> password: '123456'</code></li>
<li class="L8"><code class="hljs javascript"> }).then(res => {</code></li>
<li class="L9"><code class="hljs cpp"> // res为服务端返回的数据</code></li>
<li class="L0"><code class="hljs"> })</code></li>
<li class="L1"><code class="hljs"> },</code></li>
<li class="L2"><code class="hljs"></code></li>
<li class="L3"><code class="hljs cpp"> // get示例</code></li>
<li class="L4"><code class="hljs"> sumbitByGet() {</code></li>
<li class="L5"><code class="hljs cs"> this.$u.get('/user/login', {</code></li>
<li class="L6"><code class="hljs bash"> username: 'lisa',</code></li>
<li class="L7"><code class="hljs bash"> password: '123456'</code></li>
<li class="L8"><code class="hljs javascript"> }).then(res => {</code></li>
<li class="L9"><code class="hljs cpp"> // res为服务端返回的数据</code></li>
<li class="L0"><code class="hljs"> })</code></li>
<li class="L1"><code class="hljs"> },</code></li>
<li class="L2"><code class="hljs"> }</code></li>
<li class="L3"><code class="hljs">}</code></li>
</ol></li>
</ul>
</li>
</ul>
</li>
</ul> 
来源：https://www.cnblogs.com/Alex80/p/17779728.html

頁: [1]

琼殿技术论坛's Archiver

Uni-App Http请求