axios封装post、get请求,axios三种请求案列
首先安装axios 和 qs 库。以便用于post向后端发送FormData数据格式。
在src目录下,新建一个request目录,
创建http.js,配置域名和自定义拦截器等
import axios from 'axios';import qs from 'qs';import { Toast } from 'vant';//可根据实际项目引用,第三方库(若api报错,则弹窗提示信息)const successCode = 1;//接口成功响应状态码,具体以项目为准// 创建axios实例const service = axios.create({ baseURL: 'http://www.abc.com', // api的base_url,以实际项目为准 timeout: 5000, // 请求超时时间});// request拦截器service.interceptors.request.use(config => { // Do something before request is sent // if (store.getters.token) { // config.headers['token'] = getToken() // 让每个请求携带token--['token']为自定义key 请根据实际情况自行修改 // } return config}, error => { // Do something with request error console.log(error); // for debug Promise.reject(error)});// respone拦截器service.interceptors.response.use( response => { const res = response.data; // if the custom code is not 20000, it is judged as an error. if (res.code !== successCode) { // Toast.fail(res.msg); Toast(res.msg); return Promise.reject(new Error(res.msg || 'Error')) } else { return res } }, error => { console.log('err' + error);// for debug Toast.fail(error.message); return Promise.reject(error) });export default service/** * get 请求方法 * @param url * @param params * @returns {Promise} */export function get(url, params = {}) { return new Promise((resolve, reject) => { service .get(url, { params: params }) .then(response => { resolve(response) }) .catch(err => { reject(err) }) })}/** * post 请求方法 * @param url * @param data * @returns {Promise} */export function post(url, data = {}) { return new Promise((resolve, reject) => { service.post(url, qs.stringify(data)).then( response => { // console.log(response.data.code) resolve(response) }, err => { reject(err) } ) })}
第一种:
在request目录另新建一个js文件,文件名可以根据项目需求命名,例如:user.js,可以表示用户相关操作
import request from './http.js'import qs from 'qs';//得到最新一条对话信息列表export function getLastMessage(params) { return request({ url: '/app/test/getLastMessage.html', method: 'post', data:qs.stringify(params) });}export function getLastMessageGet(params) { return request({ url: '/app/websocket/test/getLastMessageGet.html', method: 'get', params });}
调用,src/views/user/Index.vue
<script> import { getLastMessage,getLastMessageGet } from '../../request/user.js';//引入文件 //调用此方法即可 // post getLastMessage({ page:1, }).then(response => { console.log(response ) }).catch(error => { console.log(error) }); //get getLastMessageGet ({ page:1, }).then(response => { console.log(response ) }).catch(error => { console.log(error) });</script>
第二种:
在main.js 全局注册http.js 封装的 post和get方法
import { post, get} from './request/http.js'// 定义全局变量Vue.prototype.$post = post;Vue.prototype.$get = get;
调用,src/views/user/Index.vue
<script> this.$post('/app/websocket/test/getLastMessage.html', { page: 1 }).then(response => { console.log(response ) }).catch(err => { console.log(err) }); this.$get('/app/websocket/test/getLastMessageGet.html', { page: 1 }).then(response => { console.log(response ) }).catch(err => { console.log(err) });</script>
第三种:经典jquery写法
在main.js 全局注axios和qs
import axios from 'axios';import qs from 'qs';Vue.prototype.$myaxios = axios;Vue.prototype.$myqs = qs;
<script> this.$myaxios({ method: 'get', url: 'http://www.abc.com/app/test/getLastMessageGet.html', params:{ page: 1, uid: 666 } }).then((res) => { if (res.status === 200){ } console.log(res) }).catch(err => { console.log(err) }); this.$myaxios({ method: 'post', url: 'http://www.abc.com/app/test/getLastMessage.html', data:this.$myqs.stringify( { page:1, uid: 666 }) }).then((res) => { if (res.status === 200){ } console.log(res) }).catch(err => { console.log(err) });</script>
作者:可乐_加冰_
链接:https://www.jianshu.com/p/ed34797a839b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。