1. httpネットワークリクエストの概念

HTTP は、Web アプリケーションの基礎となるデータ転送用のプロトコルです。HTTP リクエストは通常、Web サーバーからデータを取得したり、Web サーバーにデータを送信したりするために使用されます。

フロントエンドとバックエンドが分離されており、両端の通信プロトコルとして http が使用されます。もちろん Websocket など他のプロトコルもありますが、フロントエンドアプリケーションとバックエンドアプリケーションにとって最も重要なプロトコルは http です。

Web サーバーはドメイン名または IP アドレスを介してアクセスされます

ネットワークリクエストは、フロントエンドとバックエンドの分離開発で最も頻繁に使用されます。Ajax テクノロジは Web サイトアプリケーションで使用され、uni.request は uniapp に基づくモバイル開発で使用されます。

2. カプセル化の必要性

パブリックロジックコードを抽出し、エクスポートを通じて関数、オブジェクト、属性を公開し、インポートを通じてこれらの公開された関数、オブジェクト、属性を使用してコードを再利用可能にし、コードの保守性を向上させ、1 つの変更とすべての変更の効果を実現します。

コードをより小さく再利用可能な部分に編成するための手法。カプセル化により、コードの保守とテストが容易になり、コードの再利用が容易になります。カプセル化は、コードの実装の詳細を隠すのにも役立ち、コードを理解しやすく、使いやすくします。

JavaScript では、関数を使用してコードをカプセル化します。関数は、入力を受け取り、出力を返す再利用可能なコードブロックです。コードを関数内にカプセル化することで、コードをより小さく再利用可能な部分に整理し、関数内に隠すことができます。これにより、コードの保守とテストが容易になり、コードの再利用が容易になります。

4. u-view は、Axios と同様の http リクエストプラグインを提供します。https: //www.uviewui.com/is/http.htmlを参照してください。

。サポートをお約束します

。リクエストとレスポンスのインターセプタをサポート

。ファイルのアップロード/ダウンロードをサポート

3. uview コンポーネントでカプセル化を使用する

1. プロジェクトで設定する必要がある情報は config/inrdex.js に別途配置されます

// リクエストの基本パス
const BaseURL = process.env.NODE_ENV === "development" ?
" http://192.168.1.188:8080 "http://192.168.1.7555:8080"://テスト環境 (リクエストインターフェイスのプロキシパス)
"http://:8080";//オンライン環境

2. http をカプセル化する

import {baseURL} from "@/config/index.js"// 引入基路径
const http = uni.$u.http//uview的http插件对象

// 初始化请求配置
http.setConfig((config) => {
    config.baseURL = baseURL //API的请求地址，基路径
    config.header = {//设置请求头类型，这里是form类型，要看接口文档才能确定是什么类型
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
    return config//返回上面配置好的信息
})

// 请求拦截
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
    // let strUser = uni.getStorageSync("user")//"user"是登入成功后存储的用户信息，存储为了字符串
    // let objUser = strUser ? JSON.parse(strUser) : {}//判断存不存在user，转为对象形式，否则{}，{}是为了防止空指针
    // console.log(objUser,"objUser");
    config.header.accessToken = uni.getStorageSync("token")//获取token值
    return config
}, config => { // 可使用async await 做异步操作
    return Promise.reject(config)
})



// 响应拦截
http.interceptors.response.use((response) => {
    /* 对响应成功做点什么 可使用async await 做异步操作*/
    let data = response.data//这里做浅解，可以做也可以不做，做了以后请求数据后赋值就少写一个data
    const {errmsg,errno} = data;
    if (200 !== errno) {
        return Promise.reject(data); //返回错误，通过catch来处理错误
    }else if(10001 == errno){
        uni.navigateTo({
            url:'/pages/public/login'
        })
    }
    return data
}, (response) => {
    // 对响应错误做点什么 （statusCode !== 200）
    return Promise.reject(response)
})

/**
 * 封装post请求
 * _gp 接口的_gp参数
 * _mt 接口的_mt参数
 * data 接口传递的数据
 * params 查询参数
 */
function post(_gp, _mt, data = {}, params = {}) {
    return http.post("/m.api", {//post的第三个参数才为配置项
        _gp,
        _mt,
        ...data
    },{
        ...params
    })
}

/**
 * 封装get请求
 * _gp 接口的_gp参数
 * _mt 接口的_mt参数
 * params 查询参数
 */
 function get(_gp, _mt, params={}) {
    return http.post("/m.api", {
        _gp,
        _mt,
        ...params
    })
}
export {post,get}

uni-app は uview コンポーネントでカプセル化を使用します

1. httpネットワークリクエストの概念

2. カプセル化の必要性

3. uview コンポーネントでカプセル化を使用する

おすすめ