axios的基本使用

axios的基本使用

安装

//npm方式引用
npm config set registry https://registry.npm.taobao.org  //设置npm为淘宝源
npm install axios  --save
    
//script引入方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get方式

//方式一
axios.get('api/auth/login?userName=Admin&passWord=123456')
  .then(value => {
    console.log('成功后的回调')
    console.log(value)
  })
  .catch(reason => {
    console.log('发生异常后的回调')
    console.log(reason)
  });

//方式二
axios.get('api/auth/login', {
  userName: this.userName,
  password: this.password
}).then(value => {
  console.log('成功后的回调')
  console.log(value)
}).catch(reason => {
  console.log('发生异常后的回调')
  console.log(reason)
})

post方式

axios.post('api/auth/login', {
  userName: this.userName,
  password: this.password
}).then(value => {
  console.log('成功后的回调')
  console.log(value)
}).catch(reason => {
  console.log('发生异常后的回调')
  console.log(reason)
})

通过配置属性发生请求

axios({
  method: 'post',     //默认是get方式
  url: 'api/auth/login',
  data: {
    userName: 'Admin',
    passWord: '123456'
  }
}).then(value => {     //成功后的回调       也可以不写
  
}).catch(reason => {   //发生异常后的回调   也可以不写
  
})

拦截器的使用

//request拦截器
axios.interceptors.request.use(config => {
  //请求发送之前回调
  return config;
},error => {
  //请求发送异常回调
  return Promise.reject(error);
});
 
//response拦截器
 axios.interceptors.response.use(response => {
   //收到回复后的回调
   return response;
 },error => {
   // response异常的回调
   return Promise.reject(error);
 });

通过创建实例发送请求

//创建实例
const http= axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

//通过http实例来请求 默认就有了创建时的配置
http({
  method: 'get',
  url: 'api/dev/modules',
  data: {
    userName: 'Admin',
    passWord: '123456'
  }
}).then(value => {

}).catch(reason => {

})

//实例也能使用拦截器
http.interceptors.request.use(config => {
  return config;
},error => {
  return Promise.reject(error);
});
 
http.interceptors.response.use(response => {
  return response;
},error => {
  return Promise.reject(error);
});

更多信息请参考
官方文档
中文文档