vue-axiox网络请求

 Axios 介绍

1.是基于Promise的HTTP客户端，可以在浏览器和Node.js中使用

//axios的请求值返回的是一个promise对象
var c = axios.get('http://localhost:3000/posts')

//promise对象需要用then获取值，并且用catch方法捕获异常
c.then(function(ret) {
	console.log(ret.data)
})

axios安装

npm install axios

客户端引入

import axios from 'axios';

服务器端引入

const axios = require('axios');

Get请求

axios.get('http://localhost:3000')
    .then(res => {    
        console.log(res.data);
    })
    .catch(error => {        
        console.log(error);
    });
 

Get请求传递参数1

axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })

Get请求传递参数2

axios.get('http://localhost:3000',{
        params:{
            id: 123,
            name: 'aa'
        }
    })
    .then(res => {    
        console.log(res.data);
    })
    .catch(error => {        
        console.log(error);
    });
 

  GET请求带参数2

axios({
    method: 'get',
    url: 'http://localhost:3000',
        params:{
            id: 123,
            name: 'aa'
        }    
    })
    .then(res => {
        console.log(res.data);
    }).catch(error => {        
        console.log(error);
    });
 

 POST请求用法1

axios.post('http://localhost:3000',{
        id: 123,
        name: 'aa'
    })
    .then(res => {    
        console.log(res.data);
    })
    .catch(error => {        
        console.log(error);
    });
 

 POST请求用法2

axios({
    method: 'post',
    url: 'http://localhost:3000',
    data: {
        id: '123',
        name: 'aa'
    }})
    .then(res => {    
        console.log(res.data);
    })
    .catch(error => {        
        console.log(error);
    });
 

设置默认请求的前缀地址

axios.defaults.baseURL = 'http://localhost:3000';
 
axios.get('/test?id=1')
    .then(res => {    
        console.log(res.data);
    })
    .catch(error => {        
        console.log(error);
    });
---------------------------------------------------------

//创建一个变量看当前环境是否是开发环境
const isDev = process.env.NODE_ENV === "development"
//创建axios实例
const ajax = axios.create({
	//根URL 可以在这做判断是否是在开发环境下，比如：
	baseURL:isDev 
		? 'http://rap2api.taobao.org/app/mock/160905'
		: '真实项目接口地址'
})
 

设置请求头信息

 axios({
    method: 'post',
    url: 'http://localhost:3000',
    data: {
        id: '123',
        name: 'aa'
    },
    headers:{
        'Content-Type': 'application/json',
        'Cookie': 'id=123;name=aa;'
    }})
    .then(res => {    
        console.log(res.data);
    })
    .catch(error => {        
        console.log(error);
    });

axios添加请求响应拦截器

//请求拦截器
axios.interceptors.request.use(config => {
	//加自己的业务逻辑
	return config;
})

//响应拦截器
axios.interceptors.response.use(res => {
	//加自己的业务逻辑
	return res;
})

 发送请求携带cookie

axios.defaults.withCredentials=true; // 让ajax携带cookie

 常用的配置项初始化（总结）

//  常规配置项
axios.defaults.baseURL = 'https://127.0.0.1:9999'; //  请求服务器具体的地址
axios.defaults.withCredentials  =true; //  在跨域中允许携带凭证
axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';//  声明传给服务器的数据，通过请求传给服务器的数据application/x-www-form-urlencoded格式
axios.defaults.headers.common["token"] = token; //  携带token请求头

//  请求拦截器：当我们通过porps请求向服务器发请求的时候，能拦截到请求主体信息，然后把请求主体传递进来的json格式的对象，变成urlencoded 某某某等于&某某某格式发送给服务器
axios.defaults.transformRequest = function (data) {
    if (data) return data;
    let result = ``;
    for (let attr in data) {2
        if(!data.hasOwnProperty(attr)) break;
        result += `&${attr}=${data[attr]}`;
    }
    return result.substring(1);
};
//  响应服务器：接受服务器返回的结果，把返回的结果，因为它的anshuosi从服务器获得的结果response对象当中包含了很多信息，既有响应头也有相应主体的信息，xx配置信息。
//  现在只拿到data，如果有错误就抛出错误的Promise，
axios.interceptor.response.use(function onFultfilled(response) {
    //  成功走这个
    return response.data;
}, function onRejected(reason) {
    //  失败走这个
    return Promise.reject(reason);
});
//  验证什么时候成功失败，用正则检验，自定义成功失败，主要以http状态码
axios.dafaults.validateStatus = function (status) {
    //  http状态码，2或者3开头的都是成功，默认只有2开头的才能成功
    return /^(2\3)\d{2}$/.test(status);
}

 连续请求加异常捕获

axios.defaults.baseURL = 'http://localhost:30001';

async function queryData() {
	// # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
	var info = await axios.get('/posts');
	console.log(info.data)
	// #2.2  让异步代码看起来、表现起来更像同步代码
	var ret = await axios.get('/comments');
	return ret.data;
}


queryData().then(function(data) {
	console.log(data)
}).catch((err) => {

	console.log('rejected', err.code);

})

最终使用方式

1.安装

npm install --save nprogress

npm install axios

1.main.js文件

// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

2.使用

 login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }
  }