前端非同步請求封裝和使用
阿新 • • 發佈:2020-12-09
1、封裝
在js檔案中封裝,
常用的有
import { get as getToken } from './token' //這個是簡化日常使用的path請求路徑,比如說完整的路徑是http://localhost:8080/api/aaa/bbb/ccc/,日常使用只需要/aaa/bbb/ccc/就可以了,VUE_APP_BASE_API根據自己需要配置 export const backend = (u) => `${process.env.VUE_APP_BASE_API}${u}` //設定請求頭和token export const options = (method) => { return{ credentials: 'include', headers: { 'Authorization': `Bearer ${getToken()}`, 'Content-Type': 'application/json; charset=utf-8' }, method } } export const get = (path) => fetch(backend(path), options('GET')).then((res) => res.status === 200 ? res.json() : res.json().then(err=> { throw err })) export const delete_ = (path) => fetch(backend(path), options('DELETE')).then((res) => res.status === 200 ? res.json() : res.json().then(err => { throw err })) export const post = (path, body) => { const data = options('POST') data.body = JSON.stringify(body)return fetch(backend(path), data).then((res) => res.status === 200 ? res.json() : res.json().then(err => { throw err })) } export const patch = (path, body) => { const data = options('PATCH') data.body = JSON.stringify(body) return fetch(backend(path), data).then((res) => res.status === 200 ? res.json() : res.json().then(err => { throw err })) } export const put = (path, body) => { const data = options('PUT') data.body = JSON.stringify(body) return fetch(backend(path), data).then((res) => res.status === 200 ? res.json() : res.json().then(err => { throw err })) }
2、使用
- 一般而言post/put/patch/delete都不需要url傳query,如需傳引數,可以通過path、body來傳引數,在path裡面拼引數不會有url注入,因為有匹配;
比如:
import {delete_ as httpDelete} from "@/xxxxx/request"; ... httpDelete(`/iron/cfwz/${this.selectllist[0].id}`) .then(() => { this.$message.success("操作成功"); this.items = this.items.filter( (x) => x.id !== this.selectllist[0].id ); this.onCurrentChange(1, this.ztId); }) .catch((e) => this.$message.error(e.message));
引數多的時候,可以把引數放在body裡面;delete方法條件多時,可用post方法來處理。
- 只有get才需要傳query
(1)對於不需要傳引數到後端的,可使用request.js的get方式
import {get as httpGet} from "@/xxxxx/request"; ... httpGet(`/aaa/bbb/ccc/`) .then((rst) => { this.cjbms = rst; }) .catch((e) => this.$message.error(e.message));
(2)對於引數少的,可以在path放參數
import {get as httpGet} from "@/xxxxx/request"; ... httpGet(`/aaa/bbb/ccc/${this.id}/`) .then((rst) => { this.obj = rst; }) .catch((e) => this.$message.error(e.message));
(3)如果需要傳query,即在路徑後端拼接引數比如https://www.example.dev/?city=Rome&price=200,最好不要直接拼接到連結,要不然會有url注入。最好像下面這樣
為此,get請求再封裝一個
export const backend_url = (p) => new URL(`${process.env.VUE_APP_BASE_API}${p}`, window.location.href) export const get_by_url = (u) => fetch(u, options('GET')).then((res) => res.status === 200 ? res.json() : res.json().then(err => { throw err }))
使用
import {backend_url,get_by_url} from "@/xxxxx/request"; ... const u = backend_url("/aaa/bbb/ccc/"); u.searchParams.append("ztId", this.ztId); get_by_url(u) .then((rst) => { this.cjbms = rst; }) .catch((e) => this.$message.error(e.message));
3、不同傳參方式,後端接收註解不一樣
(1)path中傳引數
`/aaa/bbb/ccc/${this.id}`
@DeleteMapping("/aaa/bbb/ccc/{id}") public Ok destroy(@Valid @PathVariable("id") int id) { dwhzfaService.delete(id); return new Ok(); }
(2)path後端拼接引數
`/aaa/bbb/ccc/?code=${this.code}`
@GetMapping("/aaa/bbb/ccc") public int checkCode(@RequestParam(value = "code") String code) { return dwhzfaRepository.countByCode(code); }
(3)body傳參
httpPost(`/aaa/bbb/`, { ztId: this.form.ztId, year: this.form.yearAndMonth.getFullYear(), month: this.form.yearAndMonth.getMonth() + 1, }) .then(() => { this.$message.success("操作成功"); this.$router.push({ name: "xxx.xx.x.index", params: { ztId: this.form.ztId}, }); }) .catch((e) => this.$message.error(e.message)); }) .catch(() => {});
後端
@PostMapping("/") public Ok create(@Valid @RequestBody CreateDwhzfa form) { //CreateDwhzfa 是一個類,包含簽到body傳來的想要接收的屬性欄位 dwhzfaService.add(form); return new Ok(); }
4、上傳、下載
export const upload = () => { return { 'Authorization': `Bearer ${getToken()}` } } export const download = (path, name) => { const data = options('GET') fetch(backend(path), data) .then(response => response.blob()) .then(blob => { var url = window.URL.createObjectURL(blob) var a = document.createElement('a') a.href = url a.download = name document.body.appendChild(a) // for firefox a.click() a.remove() }) }
import { upload as uploadHeaders, download as httpDownload } from "@/xxxx/request"; computed: { uploadHeaders, }, methods: { exportExcel() { httpDownload( `/xxx/xx/exportExcel/?year=${parseInt(this.year)}&ztId=11`, "匯出模板.xls" ); },successUploadFile(){ this.$message.success("匯入成功"); this.excelFileList=[]; },
}
<el-upload style="float: left; margin-left: 10px" class="upload-demo" action="/api/xxx/xx/upload" :data="{}" :headers="uploadHeaders" :limit="1" :file-list="excelFileList" :on-success="successUploadFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" > <el-button size="small" type="primary">匯入</el-button> </el-upload>
data(){ return{ excelFileList: [], } }