ios 拦截html请求参数,Vue的axios插件实现GET、POST、JSONP请求，以及请求拦截

1.需要引入vue.js和axios.js(小编比较懒直接引用的bootstrap来做样式)

2.在HTML中请求按钮

axios

GET请求

POST请求

http请求

jsonp请求

axios的http请求中method的传参：

post请求是通过data传递参数

get请求是通过params传递参数

{{msg}}

3.这里就是重点啦！请求+拦截

new Vue({

el: '#app',

data: {

msg: ''

},

mounted: function () {

axios.interceptors.request.use(function (config) {

console.log('request init' + config);

//可以添加请求前的 --- Loading效果处理

return config;

});

axios.interceptors.response.use(function (response) {

console.log('response init' + response);

//可以添加响应过后的 --- 效果处理

return response;

});

},

methods: {

get: function () {

axios.get('../package.json', {

params: {

userId: '105'

},

headers: {

token: '123'

},

before: function () {

console.log('before init');

}

}).then(res => {

this.msg = res.data;

}).catch(function (error) {

console.log('error init' + error);

})

},

post: function () {

axios.post('../package.json', {

userId: '333',

headers: {

token: 'Mr.wang'

}

}).then(res => {

this.msg = res.data;

})

},

http: function () {

axios({

url: '../package.json',

method: 'get',

data: {

userId: '106'

},

headers: {

token: 'http-test'

}

}).then(res => {

this.msg = res.data;

console.log(res.data);

})

},

jsonp: function () {

axios({

headers: {

'X-Requested-With': 'XMLHttpRequest',

'Content-Type': 'application/json; charset=UTF-8',

'Access-Control-Allow-Origin': '*'

},//设置跨域请求头

method: "POST",//请求方式

url: "https://solelynet.com/public/index.php/api/v1/UserMenu/GetTree",//请求地址

data: {

"menu_id": 1,

"thirdapp_id": 1//请求参数

}

})

.then(function (res) {

//返回值

console.log(res.data);

for (var i = 0; i < res.data.length; i++) {

console.log(res.data[i].name)

}

})

.catch(function (err) {

console.log(err);

});

}

}

})