怎么在vue中使用axios请求借口

第一步：安装依赖 npm install axios --save

第二步：我自己的习惯是在src目录下建一个api文件夹，新建两个js文件，如下图；instance.js是封装的axios文件，api.js是调用的接口函数

第三步：封装axios，在instance.js中

import axios from 'axios'//引入axios

//创建一个axios实例
const instance = axios.create({
    timeout:5000,//请求超时时间
    baseURL:'**********',//请求地址前缀
     headers: {
     "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
     },//设置请求头
})
//post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，
即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8


//添加请求拦截器,我们在发送请求前可以进行一个请求的拦截，
为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，
有些请求是需要用户登录之后才能访问的，或者post请求的时候，
我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
instance.interceptors.request.use(
        config => {
	        // 每次发送请求之前判断vuex中是否存在token        
	        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
	        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
	        const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie       
	        token && (config.headers.Authorization = token);        
	        return config;
        },
        error => {
            return Promise.reject(err);
        }
)
//这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），
会首先从本地存储中读取token，如果token存在说明用户已经登陆过，
则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，
如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，
那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，
但是后台可以选择不接收啊！




//添加response拦截器
instance.interceptors.response.use(
    response => {
        // if(response.data.code ==2){
        //     这里判断请求返回的状态码做逻辑处理
        // }
        return response
    },
    error => {
        return Promise.reject(err)
    }
)
//响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。
//例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类
//型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过
//期后调整登录页的一个操作

//封装get方法
export function get(url,params={}) {
    return new Promise((resolve,reject) => {
        instance.get(url,{params:params}).then(response => {
            resolve(response.data)
        }).catch(err => {
            reject(err)
        })
    })
}

//封装post方法
export function post(url,data={}) {
    return new Promise((resolve,reject) => {
        instance.post(url,data).then(response => {
            resolve(response.data)
        }).catch(err => {
            reject(err)
        })
    })
}

第四步：在api.js中封装接口地址，这里写一个get请求和post请求的示例

//api.js

import {get,post} from '../utils/instance'

/**
 * 获取首页默认地址
 */
export const cityGuess = () =>{
    return get("/v1/cities",{
        type: 'guess'
    });
}

//管理员登录
export const Admin_login = (data) => {
    return post('/admin/login',data)
}

第五步：在vue组件中引用