# Network Request
# Simple to use
this.$req
is an instance ofNetworkRequest
# this.$req.get(url)
Description
: get requestParam
:url
Type
:string
Required
:true
Description
: the address of request
Return
:Promise
<script>
export default {
name: 'ajax-get-demo',
methods: {
getDataA() {
this.$req.get('url').then(rs => {
// TODO
}).catch(err => {
// Error handle
this.$toast({ 'msg': err.message })
})
},
async getDataB() {
const rs = await this.$req.get('url/?param1=A¶m2=B')
// TODO
},
}
}
</script>
# this.$req.post(url, data, headers)
Description
: post requestParam
:url
Type
:string
Required
:true
Description
: the address of request
data
Type
:object
Required
:false
Description
: the data to send
headers
Type
:object
Required
:false
Description
: request header
Return
:Promise
<script>
import { Base64 } from 'js-base64'
export default {
name: 'ajax-post-demo',
data() {
return {
username: '',
password: '',
someInfo: {}
}
},
methods: {
postDataA() {
this.$req.post('url', {
username: this.username,
password: this.password
}).then(rs => {
// TODO
}).catch(err => {
// Error handle
this.$toast({ 'msg': err.message })
})
},
async postDataB() {
const token = Base64.encode(`${Math.floor(new Date().getTime())}-${this.username}`)
const rs = await this.$req.post('url', this.someInfo, { Authorization: token })
// TODO
},
}
}
</script>
# this.$req.request(options)
Description
: send requestReturn
:Promise
Param
:options
Type
:object
Required
:true
Attention
:Data
,files
,body
,stream
, exceptdata
andfiles
can be used at the same time, other parameters cannot be used at the same timeDescription
: Requested options, including the following items
Optional | Type | Required | Default | Description |
---|---|---|---|---|
url | string | true | undefined | Request address |
data | object | false | undefined | the data to send |
files | object | false | undefined | Submit files in form, support multiple file uploads (JSON objects), such as {"file": "path"}, also supports multiple files for the same field: {"file": ["path1", "path2"]} File path, support absolute path, and file path protocols such as fs: //, cache: //, box: //, etc. You can directly use the results returned by other end APIs, such as ret.data of api.getPicture callback, etc. |
body | object/string | false | undefined | Submit data in plain text, and the body supports strings and JSON objects (to verify data integrity, you need to convert JSON objects into strings and then transfer them in). When submitting a JSON object, you need to set the content-type to the application/json |
stream | string | false | undefined | Submit the file as a binary stream. Stream is a file path (string type), which supports absolute path and file path protocols such as fs:// 、cache:// 、box:// , you can directly use the results returned by other APIs, such as api.getPicture callback ret.data etc. |
method | string | false | 'get' | Request method, this value range is 'get'、'post'、'put'、'delete'、 'head'、 'options'、 'patch' |
encode | boolean | false | true | Whether to encode the url. By default or passed true, Android will always encode the URL, while iOS will only encode when the URL is illegal (such as the presence of Chinese characters). If there are special characters in the url that need to be encoded, it is recommended to encode them in the js layer first, and then this parameter is passed false. |
tag | string | false | ajax-${new Date().getTime()} | This field is used to pass the cancelAjax method to cancel the request. If this field is passed in, please ensure that the tag field of each ajax is unique |
timeout | number | false | 30 | Timeout time, unit: second |
headers | object | false | undefined | Request header |
dataType | string | false | 'json' | Returns the data type. If the field is passed json, after receiving the data returned by the server, it will try to convert it into a JSON object. If it cannot be converted into a JSON object, it will return a data type error. The value range is 'json', 'text'; |
returnAll | boolean | false | false | Whether to return all response information (including response header, message body, and status code). When true, the returned header information acquisition method (ret.headers), message body information acquisition method (ret.body), and status code acquisition method ( ret.statusCode) |
charset | string | false | utf-8 | When no character set encoding is returned in the response header, use this encoding to parse the data |
report | boolean | false | false | Whether to return upload file progress in real time |
cache | boolean | false | false | Whether to cache, if cached, the next time the network is requested, the cache will be used, which is only valid for get requests |
certificate | object | false | undefined | Used in the case of https request to enable bidirectional authentication, the client configures the p12 security certificate settings{ path: 'p12 certificate path, support file path protocols such as fs: //, widget: //, cache: //, string type' ,password:'Certificate password, string type' } |
safeMode | string | false | 'none' | Set request security mode. After setting, if the data is detected to have a security risk, an "unsafe data" error will be returned. The value range is 'none', 'both', 'request', 'response' |
proxy | object | false | undefined | Set up a proxy request server. { host: // server address, string type port: // server port, numeric type } |
# this.$req.setBaseUrl(baseUrl)
Description
: Set the base URL of the request, and later requests can use the relative addressParam
:baseUrl
Type
:string
Required
:true
Description
: Requested base network address
this.$req.setBaseUrl('https://api.example.com')
# this.$req.interceptor
Description
: The request interceptor is executed before the request is sent. The request parameters can be pre-processed. The requested options can be accessed throughthis.requestOptions
, wherethis
points to theNetworkRequest
instance, and arrow functions cannot be used here. this will point to a Vue instanceType
:Function
Return
:boolean
, Returns true to continue sending requests, false to cancel requests
# this.$req.handleError
Description
: Error handling, executed when there is an error in sending the requestType
:Function
Param
:Error
# this.$req.afterRequest
Description
: Response interceptorType
:Function
Param
: Data returned by the serverReturn
: The returned data will be the requested return data
<script>
import { Base64 } from 'js-base64'
export default {
name: 'ajax-interceptor-handleError-afterRequest-demo',
data() {
return {
username: '',
password: '',
someInfo: {}
}
},
methods: {
initRequest () {
const _this = this
this.$req.setBaseUrl('https://api.example.com')
this.$req.interceptor = function () {
// Arrow function is not available here, otherwise Param requestOptions of NetworkRequest instance cannot be obtained
// request interceptor
// execute before request
this.requestOptions.headers = {
...this.requestOptions.headers,
'Authorization': Base64.encode(`${Math.floor(new Date().getTime())}-${_this.username}`)
}
return true
// The return value determines whether to initiate the request
// return true to continue sending requests
// return false to intercept the request and cancel sending
}
this.$req.afterRequest = rs => {
alert(`After sending the request, the returned data is \n ${JSON.stringify(rs.data, null, 2)}`)
return rs.data
}
this.$req.handleError = err => {
// Error Handle
this.$toast({ 'msg': err.message })
}
}
},
onReady() {
this.initRequest()
}
}
</script>
# this.$req.setTag(tag)
Description
: Sets the tag of the current request. It is used to cancelAjax by passing the cancelAjax method. If this field is passed in, please ensure that the tag field of each ajax is unique.Param
:tag
Type
:string
Required
:true
Description
: Unique flag for each request
# this.$req.getTag()
Description
: Get the currently requested tagReturn
:tag
Type
:string | CancelTokenSource
Description
: If debugging on the PC side, it returns theCancelTokenSource
ofaxios
, and if debugging on the mobile loader, it returns the set tag string or the default tag string
# this.$req.cancelAjax(tag)
Description
: Cancel request by tagParam
:tag
Type
:string
Required
:true
Description
: Sign to cancel request
# Global use
create a new file src/utils/HttpRequest.js
:
import { NetworkRequest } from 'vue-apicloud-quickstart'
import { Base64 } from 'js-base64'
export default class HttpRequest {
constructor (baseUrl) {
// Set the base address
this.baseUrl = baseUrl
// Store request queue
this.queue = {}
}
// destroy request instance
destroy (url) {
delete this.queue[url]
const queue = Object.keys(this.queue)
return queue.length
}
// request interception
interceptors (instance, url) {
// add request interceptor
instance.interceptor = function () {
// request interceptor, do something before sending the request
if (!url.includes('/login')) {
this.requestOptions.header = {
// TODO, for example, modify the content of the request header
...this.requestOptions.header,
'Authorization': Base64.encode(`${Math.floor(new Date().getTime())}-${window.$api.getStorage('token')}`)
}
}
return true
}
// add response interceptor
instance.afterRequest = rs => {
// TODO, Do something after the request
this.destroy(url)
return rs
}
instance.handleError = (/* err */) => {
// TODO, Unified error handling
}
}
// create instance
create () {
const request = new NetworkRequest()
request.setBaseUrl(this.baseUrl)
request.requestOptions.header = {
'Content-Type': 'application/json; charset=utf-8',
'X-URL-PATH': location.pathname
}
return request
}
// request instance
request (options) {
const instance = this.create()
this.interceptors(instance, options.url)
options = Object.assign({}, options)
this.queue[options.url] = instance
return instance.request(options)
}
}
create a new file src/utils/request.js
:
import HttpRequest from './HttpRequest'
const Req = new HttpRequest('https://api.example.com')
export const login = (username, password) => {
const data = { username, password }
return Req.request({
url: '/login',
method: 'post',
data
})
}
export const getUserinfo = usertoken => {
return Req.request({ url: `/users/${usertoken}` })
}
// Define the business request here
Use in pages, src/pages/login/index.vue
:
<script>
import { login, getUserinfo } from '@/utils/request'
export default {
name: 'ajax-demo',
data() {
return {
username: '',
password: '',
usertoken: '',
userinfo: {}
}
},
methods: {
loginApp() {
login(this.username, this.password).then(rs => {
this.usertoken = rs.usertoken
this.getUserInfo()
})
},
async getUserInfo() {
const rs = await getUserinfo(this.usertoken)
this.$api.setStorage('userinfo', rs.userinfo)
this.userinfo = rs.userinfo
}
}
}
</script>