1、封装意义增强代码可读性增强代码可维护性减少代码编写2、封装在src下创建api文件夹，skdxj在http.js文件(可选)/src/API/http.jsimportaxiosfrom ' axios ' axios.defaults.base URL=' 3358127.0.0.110 axios.defaults.base URL=' 3http://172 //请求标头信息axios.defaults.headers.post [ ' content-type ' ]=' application/JSON '； axios.defaults.headers.put [ ' content-type ' ]=' application/JSON '； //请求断路器axios.interceptors.request.use (每次发送config={///请求时，判断token是否存在，如果存在，则汇总到http请求的header中为每个请求手动添加了const token=local storage.getitem (token )/console.log (token ) if (config.headers.authoring ) () /响应拦截器axios.interceptors.response.use () /请求成功//res=res.status===200？ 将201添加到promise.resolve(RES ) : promise.reject (RES )、RES={if ) RES )//的原因是，modelviewset的post请求在添加成功后返回==401跳跃登录。=401 passs//console.log (error.response ) if ) error.response.status==401 ) (//跳转不能使用this.$router.push方法window.location.href=' http://127.0.0.1:8888/' } else {//error handle (rrer //请求已发出，但超出2xx范围}处理}else//中断//eg:请求超时或中断时，更新state的network状态//network状态，用app.vue进行全局中断return promise.reject (error.response )，用于控制中断组件中的刷新重新获取数据； }； )； 封装xiaos请求//获取请求的导出函数axios _ get (URL，params )返回新协议) ) (resolve， reject ) ) axios.get ) ) ) uu urn { params : params }.then (RES={ console.log )“封装信息RES”， res ) resolve(RES.data ) ).catch ) err={ reject (err.data ) }/包post请求exportfunction axios _ post (URL rerect )n(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } )}// 封装put请求export function axios_put(url, data) { return new Promise( (resolve, reject) => { // console.log(data) axios.put(url, JSON.stringify(data)) .then(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } )}// 封装delete请求export function axios_delete(url, data) { return new Promise( (resolve, reject) => { // console.log(data) axios.delete(url, { params: data }) .then(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } )}export default axios; //⼀定要导出函数 3、使用
创建 api.js文件，将整个项目的接口请求 放在这一个文件中，方便管理查看
//将我们http.js中封装好的 get,post.put,delete 导过来import { axios_get, axios_post, axios_delete, axios_put} from './http.js'export const user_data_get = p=> axios_get('app01/user/', p)
在自己的vue中导入我们定义的接口方法
<template> <div> <table> <tr> <td>姓名</td> <td>年龄</td> <td>家乡</td> <td>角色</td> <td>身高</td> <td>班级</td> </tr> <tr v-for="item in data_list" :key="item.id"> <td>{{ item.username }}</td> <td>{{ item.age }}</td> <td>{{ item.home }}</td> <td> <p v-for="i in item.roles" :key="i.id">{{ i.role_name }}</p> </td> <td>{{ item.hight }}</td> <td>{{ item.classrooms.class_name }}</td> </tr> </table> <div> <button v-if="previous" @click="get_data(cur_page-1)"> 上一页 </button> <button v-for="num in num_page" :key="num" @click="get_data(num)" > {{ num }} </button> <button v-if="next" @click="get_data(cur_page+1)"> 下一页 </button> </div> </div></template><script>// 导⼊api.js中定义的 axios函数 import {user_data_get} from '../api/api'export default { data() { return { data_list: [], previous: null, next: "", count: "", cur_page: 1, } }, methods: { get_data(page, flag) { this.cur_page = page // 直接使用导入的 axios函数， 有参数的话就要传入参数 user_data_get({'page': page}).then(res=>{ console.log(res) this.data_list = res.results; this.previous = res.previous; this.next = res.next; this.count = res.count; }) }, }, created() { this.get_data(1) }, computed: { num_page() { var a = this.count / 3; var b = Math.ceil(a); return b; }, },};</script>