【axios】axios的基本使用

一、 Axios简介

1、 Axios是什么？

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

2.、Axios特性

支持PromiseAPI

拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。

转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。

取消请求

自动转换JSON数据

客户端支持防御XSRF

二、安装使用

1、axios组件下载

npm install axios

2、引入axios

import axios from 'axios';

3、Axios常用得请求方法

get：一般用户获取数据

post：一般用于表单提交与文件上传

patch：更新数据（只将修改得数据推送到后端）

put：更新数据（所有数据推送到服务器）

delete：删除数据

备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

4、Axios使用

4.1. GET传递参数 (get : 查询数据)

//第一种方式
axios.get('/query?name=tom')
.then(function (response) {
    console.log(response);
})

//第二种方式
axios.get('/query', {
    params: {
        name: 'tom'
    }
}).then(function (response) {
    console.log(response);
})

//第三种方式
axios({
  method: 'get',
  url: '/query',
  data: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
})

//第四种方式
axios.get('/adata/123')
.then (ret => {
console. log(ret. data)
})

4.2.POST传递参数 (post : 添加数据)

通过选项传递参数(默认传递的是json格式的数据)

axios.post('/query', {
    name: 'tom',
    icon: 'img_path'
}).then(function (response) {
    console.log(response);
})

4.3. DELETE传递参数 (delete :删除数据)

● 参数传递方式与GET类似

//第一种方式
axios.delete ( "/adata?id=123')
.then (ret=> {
    console. log (ret. data )
})

//第二种方式
axios. delete ('/adata/123 '
.then (ret= => {
console. log(ret. data)
})

//第三种方式
axios. delete ('/adata ', {
    params :{
        id: 123
    }
    })
.then (ret= => {
    console. log(ret. data)
})

//第四种方式
axios({
  method: 'delete',
  url: '/query',
  data: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
})

4. 4PUT传递参数 (put : 修改数据)

● 参数传递方式与POST类似

axios.put('/adata/123' , {
  uname:'tom',
  pwd: 123
}) .then (ret= => {
console. log(ret. data )
})

5.axios的响应结果

响应结果的主要属性

● data :实际响应回来的数据
● headers :响应头信息
● status :响应状态码
● statusText :响应状态信息

响应结果

axios.post ('/add').then (ret=> {
 console.log (ret)
})

6.axios的全局配置

● axios.defaults.timeout = 3000; // 超时时间

● axios.defaults.baseURL = 'http://localhost:3000/app'; // 默认地址

● axios.defaults.headers[ ' mytoken' ]='aqwerwqwerqwer2ewrwe23eresdf23' // 设置请求头

代码分析

//配置请求的基准URL地址
 axios.defaults.baseURL = 'http://127.0.0.1:3000/'
 //配置请求头信息
 axios.defaults.headers['mytoken'] = 'hello';
 axios.get('http://localhost:3000/axios-json').then(function(ret) {
            console.log(ret.data.uname)
        })

7.axios拦截器

1.请求拦截器

在请求发出之前设置一些信息

/ /添加一一个请求拦截器
axios.interceptors.request.use (funct ion (config) {
/ /在请求发出之前进行些信息设置
return config;
}, function (err) {
//处理响应的错误信息
}) ;

请求拦截器代码分析

 //axios请求拦截器
        axios.interceptors.request.use(function(config){
        	console.log(config.url)
        	config.headers.mytoken = 'nihao'
        	return config
        },function(err){
        	console.log(err)
        })
//.then   返回服务器响应的数据

        axios.get('http://127.0.0.1:3000/adata').then(function(data){
        	console.log(data)
        })

2.响应拦截器

在获取数据之前对数据做一些加工处理

响应拦截器代码分析

//axios响应式拦截器
        axios.interceptors.response.use(function(res) {
            // console.log(res)
            var data = res.data;
            return data;
        }, function(err) {
            console.log(err) //hello axios
        })
        axios.get('http://127.0.0.1:3000/adata').then(function(data) {
            console.log(data)
        })

8.一般开发会对axios二次封装进行使用(开发常用重点)

1,先创建一个文件夹

2.完整封装的request.js

import axios from 'axios'
import router from '@/router'

//创建一个新的axios对象
const request = axios.create({
    baseURL: process.env.VUE_APP_BASEURL, //后端接口地址统一前缀
    timeout: 30000
})

//request 拦截器
//在请求发送前对请求做一些处理,比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    console.log('process::',process)
    console.log('process.env::',process.env)
    console.log('baseURL::',process.env.VUE_APP_BASEURL)
    config.headers['Content-Type'] = 'application/json;charset=utf-8';  //设置参数请求类型
    let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
    config.headers['token'] = user.token  //设置请求头

    return config
}, error => {
    console.error('request error: ' + error) // for debug
    return Promise.reject(error)
});

//response 拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(response => { 
    let res = response.data;
    // 兼容服务端返回的字符串数据
    if (typeof res === 'string') {
        res = res ? JSON.parse(res) : res
    }
    //后端code返回401的时候去登录页面
    if (res.code === '401') {
        router.push('/login');
    }
    return res;
    },
    error => {
        console.error('response error: ' + error) // for debug
        return Promise.reject(error)
    }
)

export default request

3.分别创建两个文件,分别作为开发和生产的接口前缀路径

.env.development 开发地址

VUE_APP_BASEURL='http://localhost:9090'

.env.production 生产地址

VUE_APP_BASEURL='http://121.4.123.248/:9090'

4.main.js( $request和$ baseUrl全局使用)

将封装的 $request和$ baseUrl对象挂载到vue的实例对象上面

Vue.prototype.$request=request

Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL

这样在全局都可以使用这两个对象了 $request和$ baseUrl

5.直接使用

首先介绍一下localStroage()的使用方法。

存值:localStroage.setItem("key","value")

取值:localStroage.getItem("key")

本地登录就是:

http://localhost:9090/login

服务器登录

http://121.4.123.248:9090/login

6.补充说明关于vue .env文件配置使用

https://blog.csdn.net/qq_41538097/article/details/117355115