axios模块的安装和使用

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=>{请求失败时进行的数据处理语句块})