axios封装了ajax,$.ajax仿axios封装

适用于对老项目维护时,用习惯的axios不能使用的情况

基础封装: 保留 then 的回调、baseHref、method 传 post || get || etc,

function ajax(obj) {

var callback = $.ajax({

url: window.baseHref + obj.url,

type: obj.method || "post",

data: obj.data,

dataType: 'json',

beforeSend: function(request) {

request.setRequestHeader("X-CSRF-TOKEN", window.csrf);

},

});

callback.then = function(res, rej) {

res && callback.done(res);

rej && callback.fail(rej);

return callback;

}

return callback;

}

例子,请求成功:

ajax({

url: '/webbanner',

method: 'post',

}).then(function(res) {

console.log(res)

}, function(rej) {

console.log('rej1')

}).then(function(res) {

console.log('res2')

})

// output

// 请求结果

// 'res2'

例子,请求失败:

ajax({

url: '/11111111',

method: 'post',

}).then(function(res) {

console.log(res)

}, function(rej) {

console.log('rej1')

}).then('', function(rej) {

console.log('rej2')

})

// output

// 'rej1'

// 'rej2'

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个基于axios封装Ajax调用数据接口的示例: ```javascript import axios from 'axios'; const request = axios.create({ baseURL: 'https://api.example.com', // 接口的基础路径 timeout: 5000, // 请求超时时间 }); // 请求拦截器 request.interceptors.request.use(config => { // 在发送请求之前做些什么,比如添加token config.headers.Authorization = 'Bearer ' + getToken(); return config; }, error => { // 对请求错误做些什么 console.error('请求拦截器错误:', error); return Promise.reject(error); }); // 响应拦截器 request.interceptors.response.use(response => { // 对响应数据做些什么,比如处理错误状态码 if (response.status !== 200) { console.error('响应状态码错误:', response.status); return Promise.reject(new Error('响应状态码错误')); } return response.data; }, error => { // 对响应错误做些什么 console.error('响应拦截器错误:', error); return Promise.reject(error); }); export default request; // 调用接口 import request from '@/utils/request'; request({ method: 'get', url: '/api/user', params: { id: 1 } }).then(response => { console.log(response); }).catch(error => { console.error(error); }); ``` 以上代码中,我们通过axios.create()方法创建了一个axios实例,然后定义了请求拦截器和响应拦截器,在发送请求之前可以在请求头中添加token,对响应数据也可以进行一些处理。最后我们导出了这个axios实例,并在调用接口时使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值