转载来自51cto:https://blog.51cto.com/15091291/2629464

new Vue({

el: '#app',

data () {

return {

info: null

}

},

mounted () {

axios

.get('https://www.runoob.com/try/ajax/json_demo.json')

.then(response => (this.info = response))

.catch(function (error) { // 请求失败处理

console.log(error);

});

}

})

尝试一下 »

使用 response.data 读取 JSON 数据：

GET 实例

new Vue({

el: '#app',

data () {

return {

info: null

}

},

mounted () {

axios

.get('https://www.runoob.com/try/ajax/json_demo.json')

.then(response => (this.info = response.data.sites))

.catch(function (error) { // 请求失败处理

console.log(error);

});

}

})

尝试一下 »

GET 方法传递参数格式如下：

传递参数说明

// 直接在 URL 上添加参数 ID=12345

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

// 也可以通过 params 设置参数：

axios.get('/user', {

params: {

ID: 12345

}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

POST 方法

POST 实例

new Vue({

el: '#app',

data () {

return {

info: null

}

},

mounted () {

axios

.post('https://www.runoob.com/try/ajax/demo_axios_post.php')

.then(response => (this.info = response))

.catch(function (error) { // 请求失败处理

console.log(error);

});

}

})

尝试一下 »

POST 方法传递参数格式如下：

传递参数说明

axios.post('/user', {

firstName: 'Fred', // 参数 firstName

lastName: 'Flintstone' // 参数 lastName

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

执行多个并发请求

实例

function getUserAccount() {

return axios.get('/user/12345');

}

function getUserPermissions() {

return axios.get('/user/12345/permissions');

}

axios.all([getUserAccount(), getUserPermissions()])

.then(axios.spread(function (acct, perms) {

// 两个请求现在都执行完成

}));

axios API

可以通过向 axios 传递相关配置来创建请求。

实例

axios(config)

// 发送 POST 请求

axios({

method: 'post',

url: '/user/12345',

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

});

// GET 请求远程图片

axios({

method:'get',

url:'http://bit.ly/2mTM3nY',

responseType:'stream'

})

.then(function(response) {

response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))

});

axios(url[, config])

// 发送 GET 请求(默认的方法)

axios('/user/12345');

请求方法的别名

为方便使用，官方为所有支持的请求方法提供了别名，可以直接使用别名来发起请求：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])