1.request.js? 函數封裝

import { Toast } from 'antd-mobile';

import axios from 'axios';

import store from '../store';

import { push } from 'react-router-redux';

import qs from 'qs';

// 請求路徑

const BaseUrl = 'https://www.baidu.com/'; // 主機及端口

//axios默認配置請求的api基礎地址

axios.defaults.baseURL = BaseUrl;

// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // post 內容類型

// axios.defaults.headers.get['Content-Type'] = 'application/json;charset=utf-8'; // get 內容類型

// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; // post 內容類型 formData 類型

axios.defaults.timeout = 30000; // 超時設置,超時進入錯誤回調，進行相關操作

axios.defaults.withCredentials = false; // 是否支持跨域cookie

const codeMessage = {

200: '服務器成功返回請求的數據',

201: '新建或修改數據成功。',

202: '一個請求已經進入后臺排隊(異步任務)',

204: '刪除數據成功。',

400: '發出的請求有錯誤，服務器沒有進行新建或修改數據,的操作。',

401: '用戶沒有權限(令牌、用戶名、密碼錯誤)。',

403: '用戶得到授權，但是訪問是被禁止的。',

404: '發出的請求針對的是不存在的記錄，服務器沒有進行操作',

406: '請求的格式不可得。',

410: '請求的資源被永久刪除，且不會再得到的。',

422: '當創建一個對象時，發生一個驗證錯誤。',

500: '服務器發生錯誤，請檢查服務器',

502: '網關錯誤',

503: '服務不可用，服務器暫時過載或維護',

504: '網關超時',

};

function checkStatus(response) {

if (response.status >= 200 && response.status < 300) {

return response;

}

const errortext = codeMessage[response.status] || response.statusText;

// 提示框

Toast.info(`請求錯誤 ${response.status}: ${response.url}`,1)

const error = new Error(errortext);

error.name = response.status;

error.response = response;

throw error;

}

/**

* Requests a URL, returning a promise.

*

* @param {string} url The URL we want to request

* @param {object} [options] The options we want to pass to "fetch"

* @return {object} An object containing either "data" or "err"

*/

export default function request(url, options) {

const defaultOptions = {

credentials: 'include',

};

const newOptions = { ...defaultOptions, ...options };

if (

newOptions.method === 'POST' ||

newOptions.method === 'PUT' ||

newOptions.method === 'DELETE'

) {

if (!(newOptions.body instanceof FormData)) {

newOptions.headers = {

Accept: 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

...newOptions.headers,

};

newOptions.data = qs.stringify(newOptions.body);

newOptions.body = JSON.stringify(newOptions.body);

} else {

// newOptions.body is FormData

newOptions.headers = {

Accept: 'application/json',

...newOptions.headers,

};

}

}

return axios(url, newOptions)

.then(checkStatus)

.then((response) => {

// 成功的回調

if (newOptions.method === 'DELETE' || response.status === 204) {

return response.text();

}

return response.data;

})

.catch((e) => {

// 失敗的回調

const { dispatch } = store;

const status = e.name;

if (status === 401) {

dispatch({

type: 'login/logout',

});

return;

}

if (status === 403) {

dispatch(push('/exception/403'));

return;

}

if (status <= 504 && status >= 500) {

dispatch(push('/exception/500'));

return;

}

if (status >= 404 && status < 422) {

dispatch(push('/exception/404'));

}

});

}

2.注：向后臺傳遞數組的方法

需要在qs的方法中設置它的indices為false即可，如：

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });

.

js函數封裝

1.隨機數

常用js函數封裝

see them... // 獲取網址的get參數 var GET = function(name) { var reg = new RegExp("(^|&)" + na ...

前端總結&&num;183&semi;基礎篇&&num;183&semi;JS(三)arguments、callee、call、apply、bind及函數封裝和構造函數

前端總結系列 前端總結·基礎篇·CSS(一)布局 前端總結·基礎篇·CSS(二)視覺 前端總結·基礎篇·CSS(三)補充 前端總結·基礎篇·JS(一)原型.原型鏈.構造函數和字符串(String) 前 ...

main&period;js中封裝全局登錄函數

1. 在 main.js 中封裝全局登錄函數 通過 vue 對象的原型擴展,可以擴展一個函數,這樣這個函數就可以在每一個界面通過類似指向對象的方式,去訪問這個函數. 如下是 main.js 擴展的函數 ...

JS中深淺拷貝 函數封裝代碼

一.了解 基本數據類型保存在棧內存中,按值訪問,引用數據類型保存在堆內存中,按址訪問. 二.淺拷貝 淺拷貝只是復制了指向某個對象的指針,而不是復制對象本身,新舊對象其實是同一內存地址的數據,修改其中一 ...

js cookie創建讀取刪除函數封裝

js cookie創建讀取刪除函數封裝 一.總結 都是為了方便操作,這樣弄了很方便 1.創建cookie的函數封裝的作用:方便設置過期時間expire,方便設置鍵和值 2.查詢cookie的數據封裝的 ...

js進階ajax函數封裝(匿名函數作為參數傳遞)(封裝函數引入文件的方式非常好用)

js進階ajax函數封裝(匿名函數作為參數傳遞)(封裝函數引入文件的方式非常好用) 一.總結 2.匿名函數作為參數傳遞 二.js進階ajax函數封裝 ajax1.js function ajax(ur ...

Echart使用js進行封裝成函數

Echart使用js進行封裝成函數 主要是對 json 串的封裝,使用 js 進行對 json 的解析.之間用的最多是循環取出數組中的值,如果拿去使用可直接修改 json 就好. 上一篇把二維的封裝好 ...

JS 抖動函數封裝

原生JS實現封裝的抖動函數框架

隨機推薦

關于 FPGA 內部信號扇入扇出

扇入.扇出系數 扇入系數是指門電路允許的輸入端數目.一般門電路的扇入系數為1—5,最多不超過8.扇出系數是指一個門的輸出端所驅動同類型門的個數,或稱負載能力.一般門電路的扇出系數為8,驅動器的扇出系數 ...

開源安卓Http文件下載框架file-downloader的使用

file-downloader FileDownloader(https://github.com/wlfcolin/file-downloader)是本人開源的一個安卓Http文件下載框架,是根據自 ...

常用jQuery代碼01

1.點擊獲得當前元素索引,實現切換相應的圖片路徑 $(".li").bind("click", function () { var _num = $(this) ...

通過CSS禁用頁面模塊的復制和粘貼功能

樣式代碼:?-moz-user-select: none;?-webkit-user-select: none;?-ms-user-select: none;?-khtml-user-select: ...

【轉】17種常用的JS正則表達式 非負浮點數 非負正數&period;

SQL練習之兩個列值的交換

SELECT * FROM dbo.test2

用PowerMockito來mock私有方法(轉)

話說我們做的所謂的接口測試真的是不倫不類啊,測的是controller層,那叫接口木??!!可是老大們說寫的是接口測試,那就接口吧! 自接手寫這個接口測試不久,很多人,包括一個關系比較好的架構師就跟我 ...

枚舉for&sol;in

for/in循環可以遍歷對象中所有可以枚舉的屬性(包括自有屬性和繼承屬性).對象繼承的內置方法不能枚舉,凡是在代碼中給對象自己或者繼承的類添加的屬性方法都是可枚舉的,但是對象自有的內置屬性可不可以枚舉 ...

c&num; aes，des，md5加密等解密算法

一:可逆加密,即是能加密也能解密 對稱可逆加密:加密后能解密回原文,加密key和解密key是一個 加密算法都是公開的,密鑰是保密的, 即使拿到密文 你是推算不了密鑰 也推算不了原文 加密解密的速度快, ...

個人常用的移動端淺灰底index&period;html

總結

以上是生活随笔為你收集整理的react封装函数_react request.js 函数封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。