Axios安装与使用

1.安装

在需要axios的项目中使用命令安装：

cnpm install axios -S
或
npm install axios -S

2.使用

（1）基本用法

①.导入

在使用的组件中倒入模块

import Axios from 'axios'

②.get

Axios.get('请求接口地址',{params:{参数列表}})
.then(resp=>{接受数据并处理数据})
.catch(resp=>{报错信息})

例如：

 mounted() {Axios.get('http://localhost:8083/api/category',{params:{pId:0}}).then(resp=>{this.category = resp.data.data})}

③.post

Axios.post('请求接口地址',拼接方式接收参数列表)
.then(resp=>{接受数据并处理数据})
.catch(resp=>{报错信息})

例如：

Axios.post('http://localhost:8083/api/user/add',"username="+user.username+"&phone="+user.phone+"&email="+user.email+"&password="+user.password).then(resp=>{location.reload()})

（2）集中管理

步骤一：在main.js 中使用prototype定义一个对象为axios

import axios from 'axios'
Vue.prototype.$http = axios

步骤二：在需要请求的接口组件中，直接使用this.$http.get或this.$http.post请求接口

（3）统一管理

步骤一：在src/util/request.js文件中导入axios模块

import axios from 'axios'

步骤二：在src/util/request.js中定义并暴露request对象为进行了基础配置的axios，指定了接口的总地址。

const request = axios.create({baseURL:'http://localhost:8083/api'
})

步骤三：在src/api目录中创建js文件夹引入request，定义接口请求方法

import request from '../util/request.js'
export function 方法名称（data）{return request({url:'接口路由',params:data,method:'传递参数方法get或post等'})
}

步骤四：在应用接口请求方法的组件直接应用方法，格式如下：

import {方法列表} from '../api/方法所在js文件夹'

步骤五：在需要请求的方法直接调用方法。格式如下：

方法名称({参数列表})
.then(resp=>{请求成功时进行的数据处理语句块})
.catch(resp=>{请求失败时进行的数据处理语句块})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！