axios的基本使用
axios框架的基本使用
1. axios的请求方式
axios(config)
axios.request(config)
axios.get(url,[config])
axios.delete(url,[config])
axios.heat(url,[config])
axios.post(url,[data],[config])
axios.put(url,[data],[config])
axios.patch(url,[data],[config])
2. axios框架的安装
1. 新建一个vue项目
2. 安装axios
npm install axios --save
3. 在项目中需要发送网络请求的地方使用axios即可
3. axios各个请求方式的使用案例
1. axios(config) 发送get和post请求
// 根据method值的不同,可以分别发送get和post请求
// 默认发送get请求
示例:
// 1. 无参数传入时
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
axios({ url: 'http://123.207.32.32:8000/home/multidata', // 无参数传入时 mathod: 'get', }).then((res) => { console.log(res); })
// 2. 有参数传入时
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
axios({ url: 'http://123.207.32.32:8000/home/data?type=pop&page=1', // 有参数传入时 mathod: 'get', }).then((res) => { console.log(res); })
// 3. 有参数传入时, 参数和url可以分开写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
axios({ url: 'http://123.207.32.32:8000/home/data', // 有参数传入时 mathod: 'get', // 有参数传入时,参数可以提出来单独写在params中 // 注意,请求方式为get时,需要传输的数据保存再params中 // 请求方式为post时,需要传输的数据保存再data中 params:{ type: 'pop', page: 1 } }).then((res) => { console.log(res); }) // axios返回的是一个Promise对象,因此可以直接在axios()之后根.then()来获取返回结果
2. 其他请求方式可自行查询